☰

画像要素にbackground-size: coverとcontainに相当するものはありますか? 質問する

tag-icon • tag-icon html image css
画像要素に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%)、画面下部に本体の背景色が表示されます。もう 1 つの方法 では、width: auto;画像がフルサイズになるだけで、画面サイズには反応しません。

同じように画像を表示する方法はありますかbackground-size: cover?

ベストアンサー1

解決策1 -オブジェクトフィットプロパティ（IEサポートがない）

object-fit: cover;img に設定するだけです。

body {
  margin: 0;
}
img {
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: cover; /* or object-fit: contain; */
}
<img src="https://loremflickr.com/1500/1000" alt="A random image from Flickr" />

見る翻訳- に関してobject-fit: cover：

置き換えられたコンテンツは、要素のコンテンツ ボックス全体を埋めながら、アスペクト比を維持するようにサイズ調整されます。オブジェクトのアスペクト比がボックスのアスペクト比と一致しない場合、オブジェクトは収まるように切り取られます。

そしてobject-fit: contain：

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

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

解決策2 - CSSを使用して画像を背景画像に置き換える

body {
  margin: 0;
}

img {
  position: fixed;
  width: 0;
  height: 0;
  padding: 50vh 50vw;
  background: url("https://loremflickr.com/1500/1000") no-repeat;
  background-size: cover;
}
<img src="https://via.placeholder.com/1500x1000" alt="A random image from Flickr" />

おすすめ記事