CSS 플렉스 박스 모델을 사용하여 이미지가 종횡비를 유지하도록 강제 할 수 있습니까?

JS Fiddle : http://jsfiddle.net/xLc2Le0k/2/

컨테이너의 너비를 채우기 위해 이미지가 늘어나거나 줄어 듭니다. 괜찮습니다.하지만 이미지 비율을 유지하기 위해 높이 를 늘리거나 줄일 수도 있습니까?

HTML

<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>

CSS

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

img 태그의 경우 한쪽을 정의하면 다른 쪽의 크기가 조정되어 종횡비를 유지하고 기본적으로 이미지가 원래 크기로 확장됩니다.

이 사실을 사용하여 각 img 태그를 div 태그로 래핑하고 너비를 부모 div의 100 %로 설정하면 높이가 원하는 가로 세로 비율에 따라 달라집니다.

http://jsfiddle.net/0o5tpbxg/

* {
    margin: 0;
    padding: 0;
}
.slider {
    display: flex;
}
.slider .slide img {
    width: 100%;
}

플렉스 부모 내부의 어느 축에서나 이미지가 늘어나지 않도록 몇 가지 해결책을 찾았습니다.

예를 들어 이미지에 개체 맞춤을 사용해 볼 수 있습니다.

object-fit: contain;

http://jsfiddle.net/ykw3sfjd/

또는 경우에 따라 더 잘 작동 할 수있는 플렉스 특정 규칙을 추가 할 수 있습니다.

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

포함하는 div를 추가 할 필요가 없습니다.

css "align-items"속성의 기본값은 "stretch"로 이미지가 원래 높이까지 늘어납니다. css "align-items"속성을 "flex-start"로 설정하면 문제가 해결됩니다.

.slider {
    display: flex;
    align-items: flex-start;  /* ADD THIS! */
}

본질적인 크기를 가진 대부분의 이미지 , 즉 jpeg이미지 처럼 자연스러운 크기 입니다. 지정된 크기가 너비와 높이 중 하나를 정의하는 경우 고유 비율을 사용하여 누락 된 값이 결정됩니다 ...- MDN 참조 .

그러나 내가 아는 한 현재 Flexible Box Layout Module Level 1을 사용하여 직접 플렉스 항목으로 설정되는 이미지가 예상대로 작동하지 않습니다 .

다음 토론을 참조하고 버그 보고서가 관련 될 수 있습니다.

• Flexbugs # 14 -Chrome / Flexbox Intrinsic Sizing이 올바르게 구현되지 않았습니다.
• Firefox 버그 972595 -Flex 컨테이너는 flex 항목의 고유 너비를 계산하기 위해 "width"대신 "flex-basis"를 사용해야합니다.
• Chromium 문제 249112 -Flexbox에서 고유 종횡비를 허용하여 기본 크기 계산을 알립니다.

해결 방법으로 각각 <img>을 <div>또는로 래핑 할 수 <span>있습니다.

jsFiddle

.slider {
  display: flex;
}

.slider>div {
  min-width: 0; /* why? see below. */
}

.slider>div>img {
  max-width: 100%;
  height: auto;
}

<div class="slider">
  <div><img src="https://picsum.photos/400/300?image=0" /></div>
  <div><img src="https://picsum.photos/400/300?image=1" /></div>
  <div><img src="https://picsum.photos/400/300?image=2" /></div>
  <div><img src="https://picsum.photos/400/300?image=3" /></div>
</div>

4.5 플렉스 아이템의 묵시적 최소 크기

flex 항목에 대해보다 합리적인 기본 최소 크기를 제공하기 위해이 사양에서는 CSS 2.1에 정의 된 min-width 및 min-height 속성 의 초기 값으로 새로운 auto 값을 도입합니다 .

또는 CSS table레이아웃을 대신 사용할 수 있습니다. 와 유사한 결과를 얻을 수 있으며 flexboxIE8에서도 더 많은 브라우저에서 작동합니다.

jsFiddle

.slider {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.slider>div {
  display: table-cell;
  vertical-align: top;
}

.slider>div>img {
  max-width: 100%;
  height: auto;
}

<div class="slider">
  <div><img src="https://picsum.photos/400/300?image=0" /></div>
  <div><img src="https://picsum.photos/400/300?image=1" /></div>
  <div><img src="https://picsum.photos/400/300?image=2" /></div>
  <div><img src="https://picsum.photos/400/300?image=3" /></div>
</div>

나는 최근에 flexbox를 가지고 놀았고 실험과 다음 추론을 통해 이에 대한 해결책을 찾았습니다. 그러나 실제로 이것이 정확히 일어나는 일인지 확실하지 않습니다.

실제 너비가 플렉스 시스템의 영향을받는 경우. 따라서 요소의 너비가 부모의 최대 너비에 도달하면 CSS에 설정된 추가 너비가 무시됩니다. 그런 다음 너비를 100 %로 설정하는 것이 안전합니다.

img 태그의 높이는 이미지 자체에서 파생되므로 높이를 0 %로 설정하면 작업을 수행 할 수 있습니다. (이것은 내가 무엇에 대해 명확하지 않은 곳입니다 ...하지만 그것을 고쳐야한다는 것이 이해가되었습니다)

데모

(먼저 여기에서 본 것을 기억하십시오!)

.slider {
    display: flex;
}
.slider img {
    height: 0%;
    width: 100%;
    margin: 0 5px;
}

아직 크롬에서만 작동합니다.

이 동작이 예상됩니다. 플렉스 컨테이너는 기본적으로 모든 자식을 늘 립니다. 이미지에는 예외가 없습니다. (즉, 부모는 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/

사실 이미지의 비율을 유지하려면 이미지 태그의 컨테이너에 높이가 있어야한다는 것을 알았습니다. 예를 들면>

.container{display:flex; height:100%;} img{width:100%;height:auto;}

그런 다음 html에서 컨테이너가 태그 이미지를 래핑합니다.

<div class="container"><img src="image.jpg" alt="image" /></div>

이것은 IE 및 기타 브라우저에서 작동합니다.

나는 똑같은 문제가 있었다. 플렉스 정렬을 사용하여 요소를 중앙에 배치하십시오. align-items: center대신 을 사용해야 합니다 align-content: center. 이렇게하면 가로 세로 비율이 유지되지만 align-content는 가로 세로 비율을 유지하지 않습니다.