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

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

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

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

img {
    flex-shrink: 0;
}

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

Comments

comments

%d人のブロガーが「いいね」をつけました。