CSS 배경 이미지를 너비에 맞추고 높이를 비례적으로 자동 조정하려면 어떻게 해야 합니까?

CSS 배경 이미지를 너비에 맞추고, 높이를 비례하여 자동 크기 조절

문제

CSS에서 배경 이미지를 너비와 동일하게 설정하는 경우 이미지 비율을 유지하기 위해 페이지 너비와 높이를 설정하면 특히 수직 자르기 및 이미지와 관련하여 문제가 발생할 수 있습니다. 배치.

해결책: 배경 크기: 커버

CSS3은 이미지 크기를 제어할 수 있는 배경 크기 속성을 제공합니다. background-size:cover를 설정하면 가로 세로 비율을 유지하면서 배경 위치 지정 영역을 완전히 덮는 가장 작은 크기로 이미지 크기를 조정할 수 있습니다.

body {
    background-image:    url(images/background.svg);
    background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: center center;              /* optional, center the image */
}

이 설정을 사용하면 배경 이미지가 페이지 너비를 덮을 수 있습니다. , 그에 따라 높이가 조정되어 원하는 반응성과 자르기 동작이 이루어집니다.

포함 및 덮개 비교

background-size 속성은 서로 다른 크기 조정 동작을 제공하는 두 가지 추가 값인 contain 및cover를 제공합니다.

• contain: 이미지가 잘리지 않고 배경 위치 지정 영역 내에 맞는지 확인하여 결과적으로 이미지 주변에 빈 공간이 표시됩니다.
• 표지: 이미지가 배경 위치 지정 영역 전체를 덮도록 보장하여 이미지를 맞게 자릅니다.

시각적 비교

경계 상자 내에 표시된 아래 이미지를 생각해 보세요. 포함은 상자 내에서 이미지가 완전히 보이도록 하고, 표지는 상자를 이미지로 채워서 하단이 잘립니다.

[포함 및 표지 배경 크기 설정이 있는 이미지 이미지]

실시간 데모

다음 코드는 포함과 표지의 차이점을 보여줍니다.

<div><div class="contain"></div>
<p>Note the grey background. The image does not cover the whole region, but it's fully contained.</p>
</div>
<div><div class="cover"></div>
<p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image covers all of the <code><div></code>.</p>
</div>

위 내용은 CSS 배경 이미지를 너비에 맞추고 높이를 비례적으로 자동 조정하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!