HTMLで高さ指定あり画像をアスベクト比維持自動縮小する

2020/03/07

やりたいこと

「<img>でheight属性を指定するが、領域の横幅がwidth属性の指定を下回る場合、横幅の縮小に合わせてアスベクト比を維持したまま縦幅も縮小する」です。遅延読み込みやリフロー（レイアウト）の再実行防止などで画像の幅高さを事前に指定する必要がある場合でかつ、レスポンシブ対応など画像を自動的に縮小してほしい時に使うことを想定しています。

実現例

<style>
img {
  max-width: 100%;
  height: auto;
}
</style>
<img src="https://cdn.bugbugnow.net/blog/icon-min.png" width="512" height="512">

サンプルは、次の通りです。ウィンドウサイズを画像横幅より狭くして確認して下さい。