CSS のみを使用して境界ボックスに合わせて画像をアップスケールする方法

CSS のみを使用して境界ボックスに合わせて画像をアップスケールする:

提示された課題は、画像を境界ボックス内に収まるようにアップスケールすることです。アスペクト比を維持します。提供された CSS コードはダウンスケーリングを処理しますが、アップスケーリングは処理しません。

CSS3 ソリューション:

幸いなことに、CSS3 は次のソリューションを提供します:

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

HTML 構造:

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

このアプローチでは、画像が境界ボックス要素の背景画像として設定されます。 background-size: contains プロパティにより、画像が切り取られたり変形したりすることなく、境界ボックスを満たすように拡大縮小されます。

互換性:

このソリューションは、最新のソリューションと良好な互換性があります。ブラウザ。最新の互換性情報については、http://caniuse.com/background-img-opts を参照してください。

中央揃え:

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

<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 サイトの他の関連記事を参照してください。