【HTML】imgタグによる画像表示の指定

<img>の基本的な挙動とCSSについてのメモです。

とりあえず猫を用意します。

画像サイズは400x225pxです、これでOKです(- -)

「width / height」を指定した時の表示

<img>の「display」の初期値は「inline」ですが、インラインブロックボックスと同じように扱われるため、「width / height」でボックスの大きさを指定することができます。

何も指定しないときは中身の画像に合わせた大きさになります。

片方だけ指定する

「width / height」のどちらかを指定してもう片方を「auto」にすると、次のように縦横比を維持して表示されます。

See the Pen img-1 by SHIITAKE (@SHIITAKE365) on CodePen.