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

要点だけ

object-fit

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

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

object-fit - CSS: カスケーディングスタイルシート | MDN

CSS の object-fit プロパティは、置換要素、例えば や などの中身を、コンテナーにどのようにはめ込むかを設定します。

developer.mozilla.org

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

object-position - CSS: カスケーディングスタイルシート | MDN

object-position は CSS のプロパティで、ボックス内における置換要素の中身の配置を指定します。ボックスの領域内で置換要素のオブジェクトに覆われていない部分は、要素の背景が表示されます。

developer.mozilla.org

これだけ。

用途

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