종횡비를 유지하면서 이미지로 Div를 비례적으로 채울 수 있는 방법은 무엇입니까?

비례적으로 이미지로 Div 채우기

이 스레드에서 사용자는 가로세로 비율을 유지하면서 div를 이미지로 채우려고 합니다. , 이미지 방향에 관계없이. div에 오버플로가 숨겨져 있어 이미지가 잘릴 가능성이 있습니다.

이 문제를 해결하려면 이미지에서 너비 및 높이 속성을 제거하여 자연스러운 가로세로 비율을 유지하는 것이 좋습니다. 그런 다음 Flexbox를 사용하여 div 내의 이미지를 중앙에 배치할 수 있습니다.

이를 달성하기 위한 CSS 스니펫은 다음과 같습니다.

.fill {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}
.fill img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}

해당 HTML 예:

<div class="fill">
    <img src="/static/imghwm/default1.png" data-src="https://picsum.photos/id/237/320/240" class="lazy" alt="">
</div>

이 솔루션은 Flexbox를 활용하여 이미지를 중앙에 배치하고 비율을 유지하면서 div를 채우도록 합니다.

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