2021.4.4 ／ 更新日：
2022.1.10
HTML･CSS 【css】Flexbox使用時にIE､Edgeで画像が伸びてしまったときの解決方法
display:flexなど、flexboxに設置した画像が縦に伸びてレイアウトが崩れてしまった時は
img{
flex-shrink: 0;
}
を指定すると正しい比率の画像が表示されます。
ChromeやFireboxではアスペクト比(画像の縦横の比率)を保ったまま伸縮してくれますが、
IE11では、この flex-shrinkプロパティ の初期値に問題があるらしく、0；に設定するとうまくいくようです。
(通常の初期値は１。)
flex-shringについて詳しくはこちら(CSS: カスケーディングスタイルシート)
関連記事
