HTML と CSS を使用して画像に「background-size: cover」と「background-size: contains」の効果を与えるにはどうすればよいですか?

「background-size: cover」と「background-size: contains」に相当するプロパティを持つ画像の表示

あなたの懸念は、背景画像の CSS プロパティ「background-size: cover」と同じプロパティを使用して、HTML ドキュメント内に画像を表示したい。 div 要素内の画像に対して「width: 100%」および「width: auto」スタイルを試しましたが、画面サイズの変化による応答性の制限と望ましくない動作が発生しました。

解決策 #1 : object-fit プロパティ (制限付きブラウザ サポート)

「object-fit」プロパティは、この目的のために特別に設計されています。 「object-fit: cover;」を設定することで、 img 要素で目的の動作を実現し、アスペクト比を維持しながら利用可能なスペースを画像で埋めることができます。ただし、このプロパティは Internet Explorer ではサポートされていないことに注意してください。

例:

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" />

以上がHTML と CSS を使用して画像に「background-size: cover」と「background-size: contains」の効果を与えるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。