【CSS】画像が勝手に小さくなる原因は？flex-shrink: 0で解決する方法を解説

Flexboxで画像とテキストを横並びにした際、

• 画像が勝手に小さくなる
• 指定した幅にならない
• スマホ表示で画像が潰れてしまう

といった経験はありませんか？

私もサイト制作中に、画像の幅を指定しているにもかかわらず、画面幅を狭くすると画像が縮んでしまい困ったことがありました。

この原因は、Flexboxの初期設定である flex-shrink にあります。

この記事では、flex-shrink: 0; の役割や画像が縮む理由、実際に使用する場面、注意点について初心者向けに解説します。

flex-shrink: 1で画像が縮む理由

flex-shrink は、Flexboxのアイテムが横幅不足になったときに、どれだけ縮むかを指定するプロパティです。

初期値は次のようになっています。

flex-shrink: 1;

つまり、Flexbox内の要素はデフォルトで縮む設定になっています。

例えば次のようなレイアウトを考えてみます。

<div class="flex">
  <img src="image.jpg" alt="">
  <p>長い文章が入ります...</p>
</div>

親要素の幅に対して画像とテキストの合計幅が大きくなると、Flexboxは要素を親要素内に収めようとします。

その結果、画像、テキストの両方を縮めて調整しようとするため、画像のサイズも小さくなってしまいます。

これは不具合ではなく、Flexboxの標準的な動作です。

See the Pen Untitled by kotetsu (@zupshihe-the-encoder) on CodePen.

実際の動きを確認してみましょう。

ブラウザの幅によって画像の動き方が違います。
上のサンプルは画像が縮みますが、下のサンプルは flex-shrink: 0; を指定しているため画像サイズが維持されます。

flex-shrink: 0を指定するとどうなる？

画像のサイズを維持したい場合は、画像側に次のように指定します。

.img {
  width: 120px;
  flex-shrink: 0;
}

flex-shrink: 0; は、

「この要素は縮まない」

という意味です。

そのため、画面幅が狭くなっても画像の横幅は維持されます。

不足したスペースは主にテキスト側が調整するため、プロフィールカードやブログ一覧などで画像サイズを固定したい場合によく利用されます。

今回のCodePenでも、ブラウザ幅を狭めると flex-shrink: 0; を指定していない画像は小さくなりますが、指定した画像は同じサイズを維持していることが確認できます。

どんな場面で使う？注意点はある？

使用する場面

flex-shrink: 0; は次のような場面でよく使用されます。

• スタッフ紹介の顔写真
• ブログ記事一覧のサムネイル
• お客様の声のアイコン画像
• 商品一覧の画像

特に「画像サイズを一定に保ちたい」場合に便利です。

デメリット・注意点

便利なプロパティですが、むやみに使うとレイアウト崩れの原因になることがあります。

例えば画像に flex-shrink: 0; を指定した状態で、親要素の幅が極端に狭くなると、今度はテキストが圧迫されてしまいます。

場合によっては、

• テキストが不自然に折り返される
• レイアウトが窮屈になる
• 横スクロールが発生する

といった問題が起きることもあります。

そのため、

「絶対に縮ませたくない要素」

に対してのみ使用するのがおすすめです。

まとめ

Flexboxでは、初期状態で flex-shrink: 1; が設定されているため、横幅が不足すると画像も縮小されます。

画像サイズを維持したい場合は、

flex-shrink: 0;

を指定することで解決できます。

ただし、すべての要素に適用するのではなく、サムネイルやプロフィール画像など、サイズを固定したい要素に限定して使うことが大切です。

Flexboxで画像が勝手に小さくなる場合は、まず flex-shrink の設定を確認してみましょう。