Flexboxで、Edge等で画像が縮む場合はflex-shrink

ブログ

Flexboxで例えば、次のように画像と本文を回り込むようなレイアウト作成した場合、

画像の大きさが揃っていれば、Chrome等では正常に表示されるものの、Edge等で画像が縮んでしまう場合があります。

これは、本文の長さに応じて画像の大きさが調整されてしまうため。これを防ぐには、画像に次のスタイルを適用します。

img {
    flex-shrink: 0;
}

これで、正しく表示されます。

たにぐち まこと

『よくわかるPHPの教科書』や『マンガでマスター プログラミング教室』の著者。 ともすた合同会社で、プログラミング教育やこども向けの講座などを Udemyや YouTubeで展開しています。

Top