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

【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.

両方指定する

「width / height」どちらも指定すると縦横比を崩して無理やり表示します。

「object-fit」プロパティ

「object-fit」プロパティで画像をボックスにフィットさせることができます。

値は「fill / contain / cover / none / scale-down」の5つです。

初期値は「fill」です。

fill

縦横比を崩してボックスを埋めるように表示されます。

contain

縦横比を維持しながらボックスに収まるサイズで表示されます。

幅と高さの内、長い方だけボックスにフィットします。

cover

「contain」と同じく縦横比を維持しながらボックスを全て覆います。

こちらは幅と高さの内、短い方だけがボックスにフィットします。

none

そのまま表示されます。

オリジナルサイズの画像がボックスのサイズで切り出されます。

scale-down

「none / contain」を指定した場合の、サイズが小さくなる方を適用します。

この場合は「contain」が適用されています。

「object-position」プロパティ

中身の画像を切り出す位置を指定できます。

値は「top / right / bottom / left」のほか「横方向 縦方向」の順で、0~100%で指定します。

初期値は「50% 50%」です。

例:object-position: 0 0;

左上の部分ですね。

例:object-position: 50% 50%;

真ん中の部分。

例:object-position: 100% 100%;

右下の部分です。

以上です、お疲れさまでした!

おまけ

猫を素材にするとやる気がでる。

広告