CSS - 배경 이미지가 포함된 반응형 레이아웃을 작성하는 방법

Question

이제 마찬가지로 배경 이미지가 포함된 컴포넌트를 만들고 싶은데 배경 이미지 크기가 100%가 될 수 없고 가운데에 컨텐츠가 있어야 하고 왼쪽에는 이미지, 오른쪽에는 텍스트가 있어야 합니다. 반응형으로 만들어 보세요

Answer 1

해 보세요 background-size: cover;

Answer 2

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

Answer 3

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

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

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

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

  position 属性或 flex)

구성 요소 개발인 경우에도

를 사용하여

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

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