[css]backgroundみたいにimg属性を設定する方法

要点だけ

object-fit

img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

これで親要素に対して中の画像をbackground-sizeみたいな感じで設置できる。

object-fit - CSS: カスケーディングスタイルシート | MDN
CSS の object-fit プロパティは、置換要素、例えば や などの中身を、コンテナーにどのようにはめ込むかを設定します。

bacjground-positionみたいなことをしたいならobject-positionを使う。

object-position - CSS: カスケーディングスタイルシート | MDN
object-position プロパティは、ボックス内における置換要素の配置を指定します。Areas of the box which aren't covered by the replaced element's object will show the element's background.

これだけ。

用途

「背景に画像を設置する」だけならbackgroundで済むけど、込み入ったことをしたければ<img>で設置したい気持ちもある。それにまあ、<img>ならaltとか仕込めるからSEO的にもよろしいかと思う。

コメント

タイトルとURLをコピーしました