[解決済み】画像要素にbackground-size: coverとcontainに相当するものはありますか？

質問

ページ数が多く、背景画像が異なるサイトがあり、CSSで表示させています。

body.page-8 {
    background: url("../img/pic.jpg") no-repeat scroll center top #000;
    background-size: cover;
}

しかし、1つのページで異なる（フルスクリーン）画像を表示するには <img> と同じプロパティを持つようにしたい。 background-image: cover; プロパティを使用する必要があります (画像は CSS からは表示できません。HTML ドキュメントから表示する必要があります)。

通常は使用します。

div.mydiv img {
    width: 100%;
}

または

div.mydiv img {
    width: auto;
}

を使うと、画像がいっぱいになり、レスポンシブになります。しかし、画像が縮みすぎてしまう( width: 100% のように、画面が狭くなると、下画面にボディの背景色が表示されます。もう一つの方法は width: auto; は、画像をフルサイズにするだけで、画面サイズには対応しない。

と同じように画像を表示する方法はありますか？ background-size: cover はどうでしょうか？

どのように解決するのですか？

解決策その1 object-fit プロパティ ( IEに対応していない )

設定するだけ object-fit: cover; をimgの上に置く。

body {
  margin: 0;
}
img {
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: cover; /* or object-fit: contain; */
}

<img src="http://lorempixel.com/1500/1000" />

参照 MDN - について object-fit: cover :

置換されたコンテンツは、縦横比を維持したままサイズ調整されます。 は、要素のコンテンツボックス全体を満たします。オブジェクトのアスペクト比が は、そのボックスのアスペクト比と一致しない場合、オブジェクトは に合わせて切り取られる。

そして object-fit: contain :

置き換えられたコンテンツは、そのアスペクト比を維持したまま、要素のコンテンツボックスに収まるように拡大縮小されます。オブジェクト全体は、そのアスペクト比を維持したままボックス内に収まるように作成されるため、オブジェクトのアスペクト比がボックスのアスペクト比と一致しない場合は、"letterboxed" になります。

また、以下を参照してください。 このCodepenのデモ を比較したものです。 object-fit: cover を画像に適用したものと background-size: cover 背景画像に適用

解決策その2 - cssでimgを背景画像に置き換える

body {
  margin: 0;
}
img {
  position: fixed;
  width: 0;
  height: 0;
  padding: 50vh 50vw;
  background: url(http://lorempixel.com/1500/1000/city/Dummy-Text) no-repeat;
  background-size: cover;
}

<img src="http://placehold.it/1500x1000" />