flexボックスレイアウトで、imgタグ要素をきれいに収めたい

Question

flexボックスレイアウトのコンテナにimgタグの要素を複数並べた場合に、コンテナに収まるように横並びで表示したいです。
単純にimg要素を並べると、合計サイズがコンテナ以上の場合、コンテナをはみでてしまいます。以下のようなコードです。

CSS
.container { display : flex; }
.container > img { flex : 1 1 auto; }

HTML

<div class="container"> <img ...> <img ...> </div>

imgをdivタグつけたり、リストなどにすればいけそうではあるのですが、imgタグを並べるだけでやる方法があるか教えていただきたいです。
よろしくおねがいいたします。

Comments

[efcode]

再現しません。containerにwidth:200px;を入れればimgは縮小するし、1200pxの画像でウィンドウサイズ900程度ならウィンドウサイズぴったりに表示します。

Answer 1

対処療法ですが、widthに要素の大きさ以下の値を指定すると収まるようです。

.container > img { flex : 1 1 auto; width: 0%; } 
```**動くサンプル：**[https://jsfiddle.net/jto759ky/](https://jsfiddle.net/jto759ky/)

Comments

[keity]

回答ありがとうございます、flexボックスに収めて表示できました。
また、Webツールサンプルまで添付していただき、非常に参考になりました。
ありがとうございます。

ただ・・、さらに画像のアスペクト比を保ちたいです・・。

.container > img { height : auto; }

なども付け加えて試してるのですが、うまくいかず。もしご存知でしたら対処教えていただけると幸いです。

本質問としての回答は得られたので、ベストアンサーとさせていただきます。ありがとうございます。

[kei344]

同じく対処療法なのであれですが、height: 100%;で比率も問題なく動くようです。

[keity]

おおーー！
目的の動作ができました！とても助かりました。ありがとうございます！

Answer 2

.container { display : flex; }
.container > img { flex : 1 1 auto; }

ここが違うみたいですね。

えっと、まずimgの横幅が大きくてはみ出ちゃう場合に
縮めてOKなら、

.container > img { flex: 1 1 auto; }

これを

.container > img { flex-shrink: 1; }

に変えてはどうでしょうか。
もしくは

.container > img { flex-glow: 0; }

.container > img { flex-basis: 0; }

それでもダメなら、画像の幅に100%をつけてあげてみて。

.container > img {
  flex-shrink: 1;
  width: 100%;
}

↑こんな感じ。

また、幅は変えずに2段目に折り返してOKなら、

.container { display: flex; }

これを

.container {
  display: flex;
  flex-wrap: wrap;
}

こうします。
すると.containerの幅を超えたときに
2段目に折り返しますよー。

Comments

[kei344]

flex: 1 1 auto;はflex-grow:1;flex-shrink:1;flex-basis:auto;をまとめて指定するものです。

【flex - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/flex

>画像の幅に100%
Chromeでは100%が優先されますね。
https://jsfiddle.net/jto759ky/1/

あと、width: 100$;になっています。

[teruri]

> flex: 1 1 auto;はflex-grow:1;flex-shrink:1;flex-basis:auto;をまとめて指定するものです。

知ってますよー。

あ、そっか。逆にglowを0にするべきなのかな。

[teruri]

誤字ってるｗｗ

[teruri]

keiさんのご指摘の箇所2点、修正しました。
ありがとうございます～＾＾

[keity]

回答ありがとうございます。
残念ながら、目的の動作を得られませんでした。