CSS만 사용하여 경계 상자에 맞게 이미지를 확대하는 방법은 무엇입니까?

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

제시된 과제는 경계 상자 안에 맞게 이미지 크기를 늘리는 것입니다. 종횡비를 유지합니다. 제공된 CSS 코드는 다운스케일링을 처리하지만 업스케일링은 처리하지 않습니다.

CSS3 솔루션:

다행히 CSS3는 솔루션을 제공합니다.

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

HTML 구조:

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

이 접근 방식을 사용하면 이미지가 경계 상자 요소의 배경 이미지로 설정됩니다. background-size: contain 속성은 이미지를 자르거나 왜곡하지 않고 경계 상자를 채울 수 있도록 크기를 조정합니다.

호환성:

이 솔루션은 최신 버전과 좋은 호환성을 갖습니다. 브라우저. 최신 호환성 정보는 http://caniuse.com/ground-img-opts를 참조하세요.

중앙 정렬:

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

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!