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

画像要素の背景サイズ プロパティの実装

最新の CSS は、背景サイズと同様の方法で画像を表示する方法を提供します。 cover および background-size: 背景画像のプロパティが含まれます。

ソリューション1: object-fit プロパティ

object-fit をサポートするブラウザーの場合、このプロパティにより、画像要素の背景サイズの動作をシームレスに複製できます。次の CSS を画像に追加するだけです:

body {
  margin: 0;
}

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

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