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

境界ボックスに合わせて画像を拡大縮小する

CSS のみを使用して境界ボックス内で画像を比例的に拡大縮小することは、簡単な作業のように思えます。ただし、境界ボックスの一次元を完全に埋めるまで画像を拡大することが望ましい場合、このアプローチは不十分です。

CSS のみのソリューション

幸いなことに、 CSS3 は、このジレンマに対する解決策を提供します。背景イメージと背景サイズのプロパティを利用すると、必要に応じて境界ボックス内の画像を拡大縮小できます。

実装

このソリューションを実装するには、次の手順に従います。

1. 境界ボックスの作成: 境界ボックスとして機能する HTML 要素内で画像を囲みます。
2. 背景画像の設定: 画像を境界ボックスの背景画像として定義します。
3. 背景の包含を有効にする: 画像が境界ボックス内に収まるように拡大縮小されるように、background-size: contains を指定します。アスペクト比を維持します。

例

<code class="html"><div class="bounding-box">
  <!-- Image as background-image -->
</div></code>

<code class="css">.bounding-box {
  background-image: url(...);
  background-size: contain;
}</code>

追加の考慮事項

• ブラウザの互換性: このソリューションは、CanIUse.com によって確認されているように、最新のブラウザと互換性があります。
• 画像の中央揃え: 境界ボックス内の画像を中央に配置するには、次を使用します。次の CSS:

<code class="css">.bounding-box {
  position: absolute;
  background-position: center;
}</code>

これらの CSS テクニックを採用すると、元の比率を維持しながら、画像を効果的に拡大縮小して境界ボックスを埋めることができます。

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