Flexbox를 사용하여 종횡비를 유지하면서 이미지를 Div에 채우려면 어떻게 해야 합니까?

Div의 비례 이미지 채우기

목표는 이미지의 가로 세로 비율을 유지하면서 div를 이미지로 채우는 것입니다. 이전 스레드와 달리 방향에 관계없이 이미지가 항상 div를 채우길 원합니다.

해결책: Flexbox

이를 달성하기 위해 CSS를 활용할 수 있습니다. flexbox:

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

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

설명:

• 컨테이너 div를 표시하도록 설정: flex 및 내용을 중앙에 배치합니다.
• flex- 지정 축소를 방지하려면 이미지에 Shrink: 0을 설정하세요.
• 설정 min-width: 100% 및 min-height: 100% 이미지가 div를 채우도록 합니다.

예:

<div class="container">
  <img src="some-image.jpg" alt="Could be portrait or landscape">
</div>

결과는 다음과 같습니다. 종횡비를 유지하면서 div를 채우는 이미지입니다. 인물이든 풍경이든 이미지가 전체 공간을 차지합니다.

위 내용은 Flexbox를 사용하여 종횡비를 유지하면서 이미지를 Div에 채우려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!