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

제시된 과제는 경계 상자 내에 맞도록 이미지 크기를 늘리는 것입니다. 종횡비를 유지합니다. 제공된 CSS 코드는 축소를 처리하지만 확대는 처리하지 않습니다.

CSS3 솔루션:

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

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

HTML 구조:

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

호환성:

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

Centering:

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

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