CSS のみを使用して境界ボックスに合わせて画像を拡大縮小するにはどうすればよいですか?

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

アスペクト比を維持しながら動的な画像スケーリング効果を実現するのは難しい場合があります。ただし、CSS3 テクニックを使用すると、この問題を解決し、境界ボックスに合わせて画像を拡大縮小できます。

CSS を使用した従来のアプローチでは、max-width プロパティと max-height プロパティを使用して、画像を境界ボックスに合わせて縮小します。指定されたコンテナ内。ただし、画像をスケールアップする場合、これらのプロパティでは不十分です。

CSS3 ソリューション

CSS3 は、background-image プロパティとbackground-size プロパティを通じてソリューションを提供します。画像をコンテナの背景として設定し、background-size: contains を使用すると、寸法が境界ボックスの全幅または高さに達するまで画像を強制的に拡大縮小できます。

HTML

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

CSS

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

互換性とオプション

このソリューションは最新のブラウザーでサポートされています。 CanIUse は、詳細な互換性テーブルを提供します。

画像を境界ボックス内の中央に配置するには、CSS のバリエーションを使用できます。

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

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