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

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

CSS3 ソリューション:

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

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

HTML 構造:

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

互換性:

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

Centering:

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

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