Flexbox에서 이미지 가로 세로 비율 유지
CSS Flexbox 모델에서는 높이 크기를 조정할 때 이미지 비율을 유지하는 것이 어려울 수 있습니다. 그러나 이를 달성하는 데는 여러 가지 방법이 있습니다.
객체 맞춤 속성
한 가지 접근 방식은 이미지에 객체 맞춤 속성을 사용하는 것입니다. object-fit: contain을 설정하면 이미지의 가로세로 비율을 유지하면서 대상 컨테이너에 맞게 크기가 조정됩니다.
Flex 관련 규칙
또 다른 옵션은 다음과 같습니다. 플렉스 관련 규칙을 사용하려면:
예
두 가지를 모두 보여주는 예는 다음과 같습니다. 방법:
<div class="slider"> <img src="http://www.placebacon.net/400/300" alt="Bacn"> <img src="http://www.placebacon.net/400/300" alt="Bacn"> <img src="http://www.placebacon.net/400/300" alt="Bacn"> <img src="http://www.placebacon.net/400/300" 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!