使用按比例缩放的图像完全覆盖容器

Question

我想按照这些规则使用CSS缩放图像：

if (containerWidth/containerHeight >=imgWidth/imgHeight) --> img { width: 100% }
if (containerWidth/containerHeight < imgWidth/imgHeight) --> img { height: 100% }

我们的想法是使用CSS（不使用javascript）使用按比例缩放的图像完全覆盖容器。

期望的结果：http://jsfiddle.net/pu76s/6/

Answer 1

使用CSS3属性background-size: cover

的背景图片

http://jsfiddle.net/UUhVf/

您可以使用background-position属性

调整定位

Answer 2

如果没有JS，这是一个很难解决的问题，因为CSS无法知道图像的宽高比。

如果你能够从你的后端检测到AR并设置一个类，我会做类似的事情：

img.portrait {
    max-height: 100%;
    height: 100%;
    width: auto;
}

img.landscape {
    height: auto;
    width: 100%;
    max-width: 100%;
}