缩放图像以适合边界框

是否有纯 CSS 解决方案将图像缩放到边界框（保持纵横比）？如果图像比容器大，则此方法有效：

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

Example:

• 用例 1（有效）：http://jsfiddle.net/Jp5AQ/2/
• 用例 2（有效）：http://jsfiddle.net/Jp5AQ/3/

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

• 用例 3（不起作用）：http://jsfiddle.net/Jp5AQ/4/

感谢CSS3，有一个解决方案！

解决方案是将图像设置为background-image然后设置background-size to contain.

HTML

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

CSS

.bounding-box {
  background-image: url(...);
  background-repeat: no-repeat;
  background-size: 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%;
}