CSS에서 이미지를 비례적으로 Div를 채우는 방법은 무엇입니까?

채워진 Div에 비례적인 이미지를 표시하는 방법

CSS에서는 div 내의 이미지에 딱 맞는 이미지를 만드는 것이 어려울 수 있습니다. 특히 다음과 같은 경우에는 더욱 그렇습니다. 종횡비를 유지하고 싶습니다. 비례성을 유지하면서 div를 이미지로 채우는 간결한 솔루션은 다음과 같습니다.

객체 맞춤 활용

대부분의 최신 브라우저는 객체 맞춤 속성을 지원하므로 사용자가 제어할 수 있습니다. 컨테이너 내에 이미지가 표시되는 방식. 이 시나리오에서는 다음 CSS를 사용할 수 있습니다.

.image-container {
  overflow: hidden;
}

.image-container img {
  object-fit: contain;
}

Object-fit: contain은 이미지가 원래 비율을 유지하면서 컨테이너를 채우도록 합니다. 또한 이미지가 잘리거나 왜곡되는 것을 방지합니다.

Flexbox 사용

다른 접근 방식은 Flexbox를 사용하는 것입니다. 이 기술을 사용하면 div 내에서 이미지를 중앙에 배치하고 유연하게 크기를 조정하여 원하는 효과를 얻을 수 있습니다.

.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.image-container img {
  flex-shrink: 0;
  min-width: 100%;
  min-height: 100%;
}

이 시나리오에서 이미지는 항상 가로 세로 비율을 유지하면서 div의 사용 가능한 높이나 너비를 채웁니다.

구현 예

이 솔루션을 구현하려면 div에 적절한 CSS를 적용하기만 하면 됩니다. 이미지 포함:

<div class="image-container">
  <img  src="/static/imghwm/default1.png" data-src="my-image.jpg" class="lazy" alt="CSS에서 이미지를 비례적으로 Div를 채우는 방법은 무엇입니까?" >
</div>

참고: 이미지가 경계 밖으로 넘치지 않도록 div에서 오버플로 속성이 숨겨지도록 설정되어 있는지 확인하세요.

위 내용은 CSS에서 이미지를 비례적으로 Div를 채우는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!