IEでheight:autoが効かない場合の対応＝min-height:1pxを指定する

IEでimgにheightを指定すると…CSSで height:autoが効かないようです。
最近、imgにheightを指定するのでバグに気づきました。

解決方法

そんな場合のかんたんな解決方法を見つけました。
このようにimgタグにwidthとheightを指定した場合…

HTML

<img class="hoge" src="hoge.png" width="1200" height="800">

IE対応は min-width:1pxを指定すればOKでした。

CSS

.hoge {
width:auto;
max-width:100%;
height:auto;
min-width:1px; /*IE対策*/
}

imgタグにwidthとheightを指定する理由

imgタグにwidthとheightを指定すると読み込みスピードが早くなります。
その場合にIEのCSS指定にコツがあることを知りませんでした。

参考記事にもっと詳しいwidthとheightを指定するメリットが掲載されています。

参考URL

【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい | Rriver
https://parashuto.com/rriver/development/img-size-attributes-are-back