CSS Flexbox에서 이미지 종횡비를 유지하는 방법은 무엇입니까?

Flexbox에서 이미지 가로 세로 비율 유지

CSS Flexbox 모델에서는 높이 크기를 조정할 때 이미지 비율을 유지하는 것이 어려울 수 있습니다. 그러나 이를 달성하는 데는 여러 가지 방법이 있습니다.

객체 맞춤 속성

한 가지 접근 방식은 이미지에 객체 맞춤 속성을 사용하는 것입니다. object-fit: contain을 설정하면 이미지의 가로세로 비율을 유지하면서 대상 컨테이너에 맞게 크기가 조정됩니다.

Flex 관련 규칙

또 다른 옵션은 다음과 같습니다. 플렉스 관련 규칙을 사용하려면:

• align-self 설정: center는 상위 이미지 내에서 이미지를 세로 중앙에 배치합니다. 컨테이너.
• flex: 0 0 auto를 설정하면 이미지의 너비와 높이를 유연하게 만들어 필요에 따라 축소하거나 확장할 수 있습니다.

예

두 가지를 모두 보여주는 예는 다음과 같습니다. 방법:

<div class="slider">
    <img src="/static/imghwm/default1.png" data-src="http://www.placebacon.net/400/300" class="lazy" alt="Bacn">
    <img src="/static/imghwm/default1.png" data-src="http://www.placebacon.net/400/300" class="lazy" alt="Bacn">
    <img src="/static/imghwm/default1.png" data-src="http://www.placebacon.net/400/300" class="lazy" alt="Bacn">
    <img src="/static/imghwm/default1.png" data-src="http://www.placebacon.net/400/300" class="lazy" alt="Bacn">
</div>

.slider {
    display: flex;
    height: 200px;
}

.slider img {
    margin: 0 5px;
    object-fit: contain;
}

/* Alternative Flex-Specific Rules */
.slider img {
    align-self: center;
    flex: 0 0 auto;
}

이 방법은 높이를 조정하는 경우에도 이미지 종횡비를 효과적으로 보존해야 합니다.

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