<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」の５つです。
初期値は「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%;
右下の部分です、尻尾。
以上です、お疲れさまでした！
おまけ
猫を素材にするとやる気がでる。
コメント