해 보세요background-size: cover;

배경 크기와 함께 사용되는 배경 위치, 사용해 보셨나요

Apple 페이지 중 일부는 배경 이미지를 사용하고 적응력이 뛰어나므로 주의 깊게 살펴볼 수 있습니다. 물론 레이아웃도 비교적 간단합니다. 그 원리는CSS3 미디어 쿼리입니다.

저는 보통 2가지 솔루션을 사용합니다:

• 12열 그리드 레이아웃 시스템(너비, 부동, 순차 응답);

미디어 쿼리 적응(
• 레이아웃, 글꼴 크기, 적응된 흐름 절약 그림 사용

  position属性或flex)

구성 요소 개발인 경우에도

인라인 매개변수props를 정의하면 구성 요소가 내부적으로 레이아웃 스타일을 결정합니다(여러 레이아웃이 미리 설정되어 있음).배경 이미지의 경우속성을 사용하여 적응형 이미지 표시(자동 채우기)를 구현하거나 미디어 쿼리를 사용하여 다양한 장치에서 서로 다른 디스플레이를 지정할 수 있습니다(예: 데스크톱 이미지의 너비가 높이보다 넓습니다. 세로 화면 이미지의 높이가 너비보다 큽니다) ) 사진(트래픽 절약).

내 생각에는 디자이너가 이미지에 적합한 크기와 계획을 충분히 제공하지 않는 한 배경을 콘텐츠 레이아웃의 일부로 사용하지 않는 것이 좋습니다!background-size或background-position: center center