CSSフレックスボックスモデルを使用して、画像の縦横比を維持するにはどうすればよいですか？

JSフィドル：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を参照してください。

ただし、現在のフレキシブルボックスレイアウトモジュールレベル1で直接フレックスアイテムとして設定されている画像の場合、期待どおりに動作しません私の知る限りで。

これらのディスカッションとバグレポートが関連している可能性があることを確認してください。

• フレックスバグ＃14 -Chrome / Flexbox固有のサイズ設定が正しく実装されていません。
• Firefoxバグ972595フレックスアイテムの固有の幅を計算するために、フレックスコンテナーは「幅」ではなく「フレックスベース」を使用する必要があります
• Chromium Issue 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値を導入しています。

または、table代わりにCSS レイアウトを使用することもできます。これによりflexbox、IE8でも、より多くのブラウザーで動作します。

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

まだクロムでのみ動作します

この動作は予期されたものです。flexコンテナはデフォルトですべての子をストレッチします。画像に例外はありません。（つまり、親はalign-items: stretchプロパティを持ちます）

アスペクト比を維持するために、2つのソリューションがあります。

1. デフォルトのalign-items: stretchプロパティをalign-items: flex-startまたはalign-self: centerなどに置き換えるか、 http：//jsfiddle.net/e394Lqnt/3/

または

2. 子供自身に独占的にalignプロパティを設定します。のような、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や他のブラウザで動作します

私は同じ問題を抱えていました。flex alignを使用して、要素を中央揃えにします。のalign-items: center代わりに使用する必要がありますalign-content: center。これはアスペクト比を維持しますが、align-contentはアスペクト比を維持しません。