CSS에서 종횡비를 유지하면서 경계 상자를 채우기 위해 이미지 크기를 조정하는 방법은 무엇입니까?

가로 세로 비율을 유지하면서 경계 상자를 채우기 위해 이미지 크기 조정

가로 세로 비율을 유지하면서 경계 상자 내에 맞도록 이미지 크기를 조정하면 다음을 수행할 수 있습니다. CSS에 도전해보세요.

다음 사용 사례를 고려하세요.

• 사용 사례 1: 이미지가 컨테이너보다 큽니다.
• 사용 사례 2: 컨테이너보다 작은 이미지(축소).
• 사용 사례 3: 컨테이너보다 작은 이미지(확대).

표준 CSS 속성 max-width 및 max-height는 이미지가 컨테이너보다 큰 경우에만 작동합니다(사용 사례 1 및 2).

다행히 CSS3는 사용 사례 3에 대한 솔루션을 제공합니다. 이미지를 배경 이미지로 설정하고 포함 값과 함께 background-size 속성을 사용하면 이미지 비율을 왜곡하지 않고 컨테이너를 채울 수 있도록 이미지 크기를 확대할 수 있습니다.

HTML:

<div class="bounding-box">
</div>

CSS:

.bounding-box {
  background-image: url(...);
  background-repeat: no-repeat;
  background-size: contain;
}

컨테이너 내에서 이미지를 중앙에 배치하려면:

.bounding-box {
  background-image: url(...);
  background-size: contain;
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
}

이 솔루션은 대부분의 최신 브라우저와 호환됩니다.

위 내용은 CSS에서 종횡비를 유지하면서 경계 상자를 채우기 위해 이미지 크기를 조정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!