2021.4.4

【css】Flexbox使用時にIE、Edgeで画像が伸びてしまったときの解決方法

  • WEB
  • テクニック
Flexbox使用時にIE、Edgeで画像が伸びてしまったときの解決方法

display:flexなど、flexboxに設置した画像が縦に伸びてレイアウトが崩れてしまった時は

 

img{
flex-shrink: 0;
}

を指定すると正しい比率の画像が表示されます。

 

ChromeやFireboxではアスペクト比(画像の縦横の比率)を保ったまま伸縮してくれますが、

IE11では、この flex-shrinkプロパティ の初期値に問題があるらしく、0;に設定するとうまくいくようです。

(通常の初期値は1。)

 

flex-shringについて詳しくはこちら(CSS: カスケーディングスタイルシート)

Share Please

Read this too