自前の画像を参照する時にwidthとheight属性を追加すると激しい腹痛におそわれる病を長く患っていたけど、どうやら完治したようなのでバッチ処理で追加してた。ついでにimg要素の各属性の記述順序なども書きかえたりして、楽しく時間を浪費した。大いなる無駄だが、他人には迷惑をかけないし、途中から段々トランスしてきた。 サイズを明示した画像がはみ出すことへの対策にはCSSでmax-widthプロパティーを使う。それだけだと縦横比が狂ってリサイズされるので、以下のようにheightプロパティーも併用するのが良い。 img { height: auto; max-width: 100%; } @supports (object-fit: scale-down) { img { height: auto; max-width: none; object-fit: scale-down; } } こう
![画像の縦横サイズの追加](https://cdn-ak-scissors.b.st-hatena.com/image/square/f2fda417d491d805f79065104db5f50e11015215/height=288;version=1;width=512/https%3A%2F%2Fhail2u.net%2Fapple-touch-icon-precomposed.png)