html - 缩放图像以适合边界框

Question

是否有仅 css 的解决方案可以将图像缩放到边界框(保持纵横比)？如果图像大于容器，则此方法有效:

img {
  max-width: 100%;
  max-height: 100%;
}

例子:

• 用例 1(有效):http://jsfiddle.net/Jp5AQ/2/
• 用例 2(有效):http://jsfiddle.net/Jp5AQ/3/

但我想放大图像直到尺寸为容器的 100%。

• 用例 3(不起作用):http://jsfiddle.net/Jp5AQ/4/

Answer 1

感谢 CSS3 有一个解决方案!

解决方法是将图片作为background-image，然后设置background-size为contain。

HTML

<div class='bounding-box'>
</div>

CSS

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

在这里测试:http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain

与最新浏览器完全兼容:http://caniuse.com/background-img-opts

要将 div 居中对齐，您可以使用以下变体:

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