Flexbox를 사용하여 이미지 종횡비를 어떻게 보존할 수 있습니까?

Flexbox를 사용하여 이미지 종횡비 적용: 비율 유지

Flexbox 레이아웃에서는 이미지 크기가 컨테이너 너비에 맞게 조정되는 경우가 많습니다. 이 동작은 많은 경우에 바람직하지만 이미지의 원래 가로 세로 비율을 유지하려는 경우에는 적합하지 않을 수 있습니다.

다음 HTML 및 CSS를 고려하세요.

<div class="slider">
    <img  src="/static/imghwm/default1.png" data-src="image1.jpg" class="lazy" alt="Flexbox를 사용하여 이미지 종횡비를 어떻게 보존할 수 있습니까?" >
    <img  src="/static/imghwm/default1.png" data-src="image2.jpg" class="lazy" alt="Flexbox를 사용하여 이미지 종횡비를 어떻게 보존할 수 있습니까?" >
    <img  src="/static/imghwm/default1.png" data-src="image3.jpg" class="lazy" alt="Flexbox를 사용하여 이미지 종횡비를 어떻게 보존할 수 있습니까?" >
</div>

.slider {
    display: flex;
}
.slider img {
    margin: 0 5px;
}

이 코드는 컨테이너를 수평으로 채우기 위해 늘리거나 줄이는 세 개의 이미지로 슬라이더를 만듭니다.

해결책 1: 사용 object-fit

이미지 종횡비를 유지하는 한 가지 방법은 CSS object-fit 속성을 사용하는 것입니다. object-fit: contain을 설정하면 비율을 유지하면서 이미지 크기를 조정하도록 브라우저에 지시할 수 있습니다.

.slider img {
    object-fit: contain;
}

이 솔루션은 간단하며 대부분의 경우에 잘 작동합니다.

해결 방법 2: Flex 관련 규칙

또 다른 접근 방식은 Flex 관련 규칙을 사용하는 것입니다. align-self: center 및 flex: 0 0 auto를 설정하면 이미지가 수직으로 중앙에 배치되고 컨테이너 내에서 비례적으로 크기가 조정됩니다.

.slider img {
    align-self: center;
    flex: 0 0 auto;
}

이 방법을 사용하면 이미지 위치 지정을 더 효과적으로 제어할 수 있으며 더 적합합니다. 특정 레이아웃 요구 사항에 맞게

위 내용은 Flexbox를 사용하여 이미지 종횡비를 어떻게 보존할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!