CSS에서 확장 가능한 배경 이미지를 설정할 때 종횡비를 어떻게 유지할 수 있습니까?

확장 가능한 배경 이미지: 화면 비율 유지

웹 디자인에서 페이지 크기에 딱 맞는 배경 이미지를 설정하는 것은 까다로운 작업. 종종 개발자는 이미지가 불균형하게 늘어나거나 잘려 원하지 않는 결과를 초래하는 문제에 직면합니다. 그러나 CSS3에서는 background-size 속성을 사용하여 이러한 문제에 대한 우아한 솔루션을 제공합니다.

background-size 속성을 사용하면 배경 이미지의 크기를 다양한 방법으로 지정할 수 있습니다. 이미지의 가로 세로 비율을 유지하면서 신체 요소의 크기에 맞추려면 표지 값을 사용하세요.

배경 크기를 표지로 설정하면 이미지가 자동으로 크기가 완전히 조정되는 가장 작은 크기로 조정됩니다. 배경 위치 지정 영역을 다룹니다. 즉, 이미지는 항상 페이지의 전체 너비를 채우고 높이는 원래 비율을 유지하도록 조정됩니다.

예를 들어 다음 코드를 고려해보세요.

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

이 CSS는 background.svg 이미지가 페이지의 전체 너비에 맞는지 확인하고 높이는 그에 따라 비율을 유지하도록 조정됩니다.

포함 및 표지 이해

CSS3에는 배경 크기 속성에 포함 및 표지라는 두 가지 기본 값이 있습니다. 두 값 모두 이미지의 가로 세로 비율을 유지하지만 다르게 동작합니다.

• contain: 이미지 크기를 배경 위치 지정 영역에 완전히 맞는 최대 크기로 조정합니다. 이는 이미지 외부의 일부 영역이 비어 있을 수 있음을 의미합니다.
• cover: 배경 위치 지정 영역을 완전히 덮을 수 있는 가장 작은 크기로 이미지 크기를 조정합니다. 이로 인해 이미지의 일부 영역이 잘릴 수 있습니다.

포함과 표지의 차이를 시각화하는 유용한 방법은 화면을 나타내는 직사각형과 이미지를 나타내는 직사각형을 상상해 보는 것입니다.

• contain: 이미지 직사각형이 화면 직사각형 안에 들어가며 주변에 빈 공간이 남을 수 있습니다.
• cover: 이미지 직사각형이 확장되어 채워집니다. 화면 직사각형으로 인해 이미지 일부가 잘릴 수 있습니다.

위 내용은 CSS에서 확장 가능한 배경 이미지를 설정할 때 종횡비를 어떻게 유지할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!