CSS만 사용하여 경계 상자에 맞게 이미지 크기를 조정하려면 어떻게 해야 합니까?

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

가로세로 비율을 유지하는 동적 이미지 크기 조정 효과를 얻는 것은 어려울 수 있습니다. 그러나 CSS3 기술을 사용하면 이 문제를 해결하고 경계 상자에 맞게 이미지 크기를 조정할 수 있습니다.

CSS를 사용하는 기존 접근 방식은 max-width 및 max-height 속성을 사용하여 이미지 크기를 경계 상자에 맞게 줄이는 것입니다. 지정된 컨테이너 내에서. 그러나 이미지를 확대할 때 이러한 속성은 부족합니다.

CSS3 솔루션

CSS3은 background-image 및 background-size 속성을 통해 솔루션을 제공합니다. 이미지를 컨테이너의 배경으로 설정하고 background-size: contain을 사용하면 크기가 경계 상자의 전체 너비 또는 높이에 도달할 때까지 이미지 크기를 강제로 조정할 수 있습니다.

HTML

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

CSS

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

호환성 및 옵션

이 솔루션은 최신 브라우저에서 지원됩니다. . CanIUse는 자세한 호환성 표를 제공합니다.

경계 상자 내에서 이미지를 중앙에 배치하려면 CSS 변형을 사용할 수 있습니다.

<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>

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