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

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%;
}