質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.32%

  • CSS

    6214questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    4308questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 669

keity

score 5

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

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

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • efcode

    2018/07/01 11:42

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

    キャンセル

回答 2

checkベストアンサー

+1

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

.container > img { flex : 1 1 auto; width: 0%; } 

動くサンプル:https://jsfiddle.net/jto759ky/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/01 13:43

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

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

    .container > img { height : auto; }

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

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

    キャンセル

  • 2018/07/01 13:49

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

    キャンセル

  • 2018/07/01 13:53

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

    キャンセル

0

.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段目に折り返しますよー。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/01 13:09

    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$;になっています。

    キャンセル

  • 2018/07/01 13:16

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

    知ってますよー。

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

    キャンセル

  • 2018/07/01 13:17

    誤字ってるww

    キャンセル

  • 2018/07/01 13:19

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

    キャンセル

  • 2018/07/01 13:45

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.32%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • CSS

    6214questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    4308questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。