CSS를 사용하여 가로 세로 비율을 유지하면서 경계 상자에 맞게 이미지 크기를 조정하려면 어떻게 해야 합니까?

CSS를 사용하여 경계 상자에 맞게 이미지 크기 조정

이미지가 컨테이너보다 큰 상황에서 CSS는 max를 사용하여 간단한 솔루션을 제공합니다. -width 및 max-height 속성. 그러나 목표가 이미지 크기 중 하나가 전체 컨테이너를 채울 때까지 이미지 크기를 확대하는 것이라면 이 접근 방식은 부족합니다.

CSS3 솔루션

CSS3 덕분에 background-image 및 background-size 속성을 활용하는 실행 가능한 솔루션이 있습니다:

1. HTML:

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

2. CSS:

   <code class="css">.bounding-box {
     background-image: url(...);
     background-repeat: no-repeat;
     background-size: contain;
   }</code>

이 접근 방식을 사용하면 이미지 크기가 경계 상자 내에 맞게 조정되고 가로 세로 비율이 유지됩니다. 여기에서 테스트해 보세요: http://www.w3schools.com/cssref/playit.asp?filename=playcss_ground-size&preval=contain.

정렬 및 호환성

CSS3를 지원하는 브라우저의 경우 이 방법은 완전히 호환됩니다. div를 중앙에 배치하려면 다음 변형을 사용하십시오.

<code class="css">.bounding-box {
  background-image: url(...);
  background-size: contain;
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
}</code>

배경 크기 속성을 활용함으로써 CSS3는 경계 상자에 맞게 이미지 크기를 조정하고 이미지 비율을 유지하며 유연한 정렬을 허용하는 편리하고 효과적인 방법을 제공합니다. 옵션을 선택하세요.

위 내용은 CSS를 사용하여 가로 세로 비율을 유지하면서 경계 상자에 맞게 이미지 크기를 조정하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!