模写修行メディア

Flexboxで画像が縦に伸びる(比率がおかしい)時の対処方法!

  • Flexboxを使って画像を横並びにしたら画像が縦に伸びた

そんな時の解決方法をサンプルを用いて紹介します。

この記事はお悩み解決系の記事なので、Flexboxに関する理解を深めたい方は下の記事をご覧ください。

CSS Flexbox の使い方をどこよりも詳しく解説!図解やサンプルもあり!

💡 コーディングの練習なら模写修行!

無料教材もあります!

【学べること】

  • 実務のレベル感を知りたい
  • プロの制作フローを学びたい
  • 基礎学習中、もしくは終えたばかり
  • CSS設計やSCSSを使った書き方を学びたい
公式サイトを見る
コーディング教材の【模写修行】は他の教材と何が違うのか?

この記事の目次

起こる問題と理想の形

画像が縦に伸びている図と正しい表示の図

上の左側が起こってしまう問題の状態で、右が理想の形です。HTMLの書き方によって左側のようになってしまいます。

<div class="hoge">
    <img src="img/test.jpg" width="600" height="400" alt="..." class="hoge-img" />
    <p class="hoge-text">テキスト...</p>
</div>
/* 画像のスタイルリセット */
img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

/* -------- */

.hoge{
    display: flex;
    width: 400px;
    justify-content: space-between;
}

.hoge-img {
    width: 180px;
}

.hoge-text {
    width: 200px;
}

このような書き方でかつ、hoge-textの文章が長い場合、画像が縦に伸びる可能性があります。

次のセクションでこの問題の解決方法を解説します。

画像が縦に伸びる(比率がおかしい)理由と対処方法

画像が縦に伸びる(比率がおかしい)理由とその対処方法を3つ紹介します。

コピペで解決できますが、なぜ起こるのかまで理解すると他でも応用が効くので、ぜひ理由も含めて参考にしてみてください。

【解決策1】align-itemsを使う

.hoge{
    display: flex;
    width: 400px;
    justify-content: space-between;
    align-items: flex-start; /* 追加 */
}

flexコンテナに対して、align-items: flex-start;を指定するだけで画像の伸びがなくなります。

align-itemsの初期値はstretchです。

align-itemsがstretchの図

stretchを指定すると、flexアイテムはflexコンテナの高さを埋めるように配置されます。その結果、画像より文章領域の高さが高いと、その文章領域の高さに合わせて画像が引き伸ばされます。

align-itemsがflex-startの

flex-startを指定すると、高さが伸びることはないので、思い通りになります。

【解決策2】align-selfを使う

.hoge-img {
    width: 180px;
    align-self: flex-start; /* 追加 */
}

画像側にalign-self: flex-start;を指定することでも同じように画像が伸びなくなります。

align-itemsはflexコンテナに指定するプロパティ、align-selfはflexアイテムに指定するプロパティです。

【解決策1】も【解決策2】も本質的にやっていることは同じです。

【解決策3】HTMLの構造を変える

<div class="hoge">
    <div class="hoge-img">
        <img src="img/test.jpg" width="600" height="400" alt="..." />
    </div>
    <p class="hoge-text">テキスト...</p>
</div>

このようにHTMLの構造を変えるだけでも解決します。CSSは何も変更していません。

<!-- before -->
<img src="img/test.jpg" width="600" height="400" alt="..." class="hoge-img" />

<!-- after -->
<div class="hoge-img">
    <img src="img/test.jpg" width="600" height="400" alt="..." />
</div>

変わった箇所だけピックアップしました。

align-itemsがstretchで画像を子要素にした時の図

画像をflexアイテムの子要素にしてしまえば伸びることはありません。


好みにもよりますが、個人的に画像は必ずdivで囲って、スタイルと当てたい場合、divに対して当てるのが良いと思います。

<div class="hoge-img">
    <img src="img/test.jpg" width="600" height="400" alt="..." />
</div>
img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

.hoge-img{
    width: 400px;
    margin: 0 auto;
}

画像の大きさを400pxで中央配置にしたい場合、上のようにimgタグに対してではなく、imgタグを囲っているdivに対してスタイリングします。

こんな時も使えます(おまけ)

align-itemsがstretchで画像を子要素にした時の図

例えばこのようなレイアウトで、サイドバーに背景色を入れたいとします。

<div class="single">
    <main class="single-main">...</main>
    <aside class="single-menu">...</aside>
</div>
.single {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* これが必要! */
}

.single-main {
    width: 65%;
}

.side-menu {
    width: 30%;
    background-color: #eee;
}

これで実装可能です。align-items: flex-start; がないと、サイドバーの高さがメイン領域に合わせて伸びてしまうので、背景色も伸びてしまいます。

このように理解して使うと応用が効いたり、問題解決のヒントになります。

他にも関連の記事を上げています!

CSS Flexbox の使い方をどこよりも詳しく解説!図解やサンプルもあり!

レイアウトを作るにはFlexboxの理解が必須です。基礎を学びたい方は上の記事をご覧ください。

【CSS Grid入門】図解も交えて使い方を詳しく解説!

Flexboxでもレイアウトは作れますが、デザインによってはCSS Gridの方が適している場合もあります。CSS Gridの使い方は上の記事をご覧ください。


この記事のように、知っておくと良い、Flexbox関連のお悩み解決系の記事も多数あげています。

Flexboxで均等幅(同じサイズ)で横並び配置する方法!Flexboxで最後の1つだけ右寄せや下寄せにする方法!Flexboxとネガティブマージンでカード型レイアウトを実装する方法!Flexboxで画像や要素が小さくなる(潰れる)時の対処方法!

超実務向け!コーディングの練習が出来るサービス作りました 🎉

模写修行

模写修行は実戦に沿った形で、コーディングの"練習"ができるサービスです。

こんな方におすすめ!

  • 実務のレベル感を知りたい
  • プロの制作フローを学びたい
  • 何を考えながらコードを書くのか知りたい
  • 基礎学習中、もしくは終えたばかり
  • CSS設計やSCSSを使った書き方を学びたい

模写修行ではデザインデータ(XD) / web上で見れる解説 / サンプルコードを提供しています。ご自身でデザインを見ながらコーディングに挑戦し、解説とサンプルコードで答え合わせ&さらに深く学ぶことができるサービスです。

他の書籍や教材との違いは、超初心者向け・学習用の書き方ではなく、実際の現場で通用する書き方や考え方にフォーカスしている点です。詳しくは下記の記事をご覧ください。

コーディング教材の【模写修行】は他の教材と何が違うのか?

無料教材もあります!👍

模写修行を見る

脱初心者!自信を持ってプロと言えるスキルを!

嬉しい声もいただいています!

自分のweb制作におけるコードの書き方、ファイル管理は模写修行さんから学ばせていただきました。独学の強い味方だと思いました。教材、メディアありがとうございました!
TwitterでDMいただきました!🙇

classの命名迷子・横並びレイアウト恐怖症だったけど、無料〜中級までいくつかやっていく中で、どんどん迷いが減っていって楽しかったです!解説記事もわかりやすい...!
Tweet

デザインきれいだし、解説とサンプルソースが付いて答え合わせしやすいところが良い。
Tweet

答え合わせ終わった。top-kvの実装方法に脱帽。そういうやり方があることを知れたことが大きい。。sass学びはじめたばかりなのでscssコードがとても参考になった。次からはscssでかく。
Tweet

無料教材もあります!👍

模写修行を見る

脱初心者!自信を持ってプロと言えるスキルを!

オススメweb制作の学習サイト17選!

👉詳しく見る

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

大学・大学院時代から個人で仕事をする。フリーランス歴7年くらい / 今は法人化。マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやります。webサービス作るのが好き!

\Share/

模写修行のトップページのスクリーンショット
模写修行

駆け出しエンジニアのためのコーディング練習教材