僅使用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。

居中：

使圖像在邊界框內居中，可以使用以下變體：

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