flexbox에서 이미지의 종횡비 유지 방법 : 1

Question

flex:1 인 이미지의 종횡비를 flexbox에서 유지하는 방법은 무엇입니까? 이 바이올린과 마찬가지로

: http://jsfiddle.net/e394Lqnt/1/

HTML :

<div class="slider"> 
    <img src="http://www.placebacon.net/400/300" alt="Bacn"> 
</div> 

CSS :

.slider { 
    display: flex; 
    flex: 1; 
} 
.slider img { 
    width: 100%; 
    align-self: flex-start; 
} 

이미지가 부모 크기를 조정할 때 화면 비율의 유지되지 않습니다. 이 문제를 해결하는 방법?

Answer 1

이 동작이 예상됩니다. 플렉스 컨테이너는 스트레치 기본적으로 모든 자식입니다. 이미지도 예외는 아닙니다.

우리는 두 가지 솔루션했습니다 가로 세로 비율을 유지하기 위해 (즉, 부모가 align-items: stretch 속성이됩니다) :

1. 중 하나가 기본 align-items: stretch 재산 align-items: flex-start 또는 align-self: center 등으로 대체를 http://jsfiddle.net/e394Lqnt/3/

또는

2. 자식에게만 배타적 속성을 설정합니다. 자체 : 같은 align-self: center 또는 align-self: flex-start 등 http://jsfiddle.net/e394Lqnt/2/