CSS でアスペクト比を維持しながら画像を拡大縮小して境界ボックスを埋めるにはどうすればよいですか?

アスペクト比を維持しながら境界ボックスを満たすように画像をスケーリングする

アスペクト比を維持しながら境界ボックス内に収まるように画像をスケーリングすると、次のことが可能になります。 CSS で課題を提起します。

次の使用例を考えてみましょう:

• 使用例 1: コンテナーより大きい画像。
• 使用例 2: コンテナーより小さい画像 (縮小)。
• 使用例 3: コンテナーより小さい画像 (拡大)。

標準の CSS プロパティ max-width と max-height は、画像がコンテナより大きい場合にのみ機能します (ユース ケース 1 および 2)。

幸いなことに、CSS3 はユース ケース 3 に対するソリューションを提供します。画像を背景画像として使用し、background-size プロパティと contains 値を使用すると、アスペクト比を変えることなく画像をコンテナいっぱいに拡大できます。

HTML:

<div class='bounding-box'>
</div>

CSS:

.bounding-box {
  background-image: url(...);
  background-repeat: no-repeat;
  background-size: contain;
}

コンテナ内の画像を中央に配置するには:

.bounding-box {
  background-image: url(...);
  background-size: contain;
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
}

このソリューションは、ほとんどの最新のブラウザーと互換性があります。

以上がCSS でアスペクト比を維持しながら画像を拡大縮小して境界ボックスを埋めるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。