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

CSS を使用して境界ボックスに合わせて画像をスケーリングする

画像がそのコンテナよりも大きい状況では、CSS は max を使用する簡単な解決策を提供します。 -width プロパティと max-height プロパティ。ただし、画像の 1 つの寸法がコンテナ全体を満たすまで画像をスケールアップすることが目標の場合、このアプローチは不十分です。

CSS3 ソリューション

CSS3 のおかげで、背景画像と背景サイズのプロパティを利用する実行可能な解決策があります:

1. HTML:

   <code class="html"><div class="bounding-box">
   </div></code>

2. CSS:

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

このアプローチにより、アスペクト比を維持しながら、画像が境界ボックス内に収まるように拡大縮小されます。ここでテストしてください: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain.

配置と互換性

CSS3 をサポートするブラウザの場合、この方法は完全に互換性があります。 div を中央に配置するには、次のバリエーションを使用します。

<code class="css">.bounding-box {
  background-image: url(...);
  background-size: contain;
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
}</code>

CSS3 は、background-size プロパティを利用することで、境界ボックスに合わせて画像を拡大縮小し、画像の比率を維持し、柔軟な配置を可能にする便利で効果的な方法を提供します。オプション。

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