freshでサイトを作っていると、twindのpreflightが刺さって画像が伸びたりすることがあったので調べているのである。
そもそもimgタグのことをよく知らない。

関連Issue

hashrock

imgというのは置換要素で、読み込まれたタイミングで内在的寸法の三つが決まる。この内在的寸法はautoに指定されていたら使われる。

hashrock

いろいろ実験。placekittenで200*300の画像を読み込む。

http://placekitten.com/200/300

min-widthは0, max-widthはnoneがデフォルトになっている。

hashrock

CSSの初期値一覧。widthとheightはauto。

hashrock

widthのautoは親要素の内部幅いっぱいであるのに対して、heightのautoは内部のコンテンツの高さが採用される。

hashrock

preflightでは下記のCSSが適用される。

img, video {
  max-width: 100%;
  height: auto;
}

これはコンテンツ幅（多くは端末のビューポート幅）を超える大きさの画像をリサイズし、heightがautoになっていることでintrinsicRatioから計算されるようになっているということかな。

hashrock

しかしこのheightをautoに上書きすることで画像サイズがぶっ壊れるというのがこのissueなのである。

hashrock

<!DOCTYPE html>
<html>

<head>
    <style>
        img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>

<body>
    <img align="center" src="https://github.com/crayon-js/crayon/raw/main/docs/logo.svg" height="256px" width="100%">
</body>

</html>