유연한 높이를 허용하면서 CSS Flexbox에서 이미지 종횡비를 어떻게 보존할 수 있습니까?

유연한 높이로 이미지 가로 세로 비율 유지

CSS 플렉스 박스 모델에서는 이미지가 컨테이너 너비를 채우기 위해 늘어나거나 줄어드는 경우가 많습니다. . 높이를 조정할 때 종횡비를 유지하는 것이 어려울 수 있습니다. 이 문제를 해결하기 위해 효과적인 솔루션을 살펴보겠습니다.

한 가지 솔루션은 이미지 요소에 객체 맞춤을 활용하는 것입니다.

object-fit: contain;

이 속성은 브라우저가 지정된 공간 내에 이미지를 포함하도록 지시합니다. 비율을 유지하면서. http://jsfiddle.net/ykw3sfjd/에서 라이브 예제를 볼 수 있습니다.

또는 특정 플렉스 속성을 사용할 수도 있습니다.

align-self: center;
flex: 0 0 auto;

align-self는 이미지가 수직인지 확인합니다. flex: 0 0 auto는 이미지의 성장 동작을 제어하는 ​​반면 상위 요소 내 중앙에 위치합니다. 사용 가능한 높이를 채우기 위해 이미지가 늘어나는 것을 방지하여 가로 세로 비율을 유지할 수 있습니다.

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