css - 如何在CSS中检测图像的纵横比

Question

网页包含的图像有时处于“纵向”模式(高度>宽度)，有时处于“横向”模式(宽度>高度)。

当“整页”显示这些图像时，我希望能够将纵向图像的高度设置为 100%(宽度由浏览器计算以尊重纵横比)，相反，宽度设置为 100%用于风景图片。

这在 JavaScript 中很容易做到，但是有没有一种方法/技巧可以在没有 JavaScript 的情况下仅在 CSS 中做到这一点？ (它适用于 JavaScript 很可能被禁用的内部网站；但是使用的浏览器是现代的，因此如果需要可以使用 CSS3)。

---

或者，如果这不可能，提供图像的服务器可以评估每张图像的大小，并将“肖像|风景”作为元数据发送；最有效的方法是什么(比如用 PHP？)

Answer 1

这里的技巧是在父容器上设置您想要限制图像的尺寸，然后将图像的尺寸设置为 auto 并将它们的最大尺寸设置为 100%。

这是一个简单的示例，其中添加了一些定位以保持图像居中；通过调整 div 和图像的大小来测试它。

div{
    background:black;
    height:300px;
    width:600px;
}
img{
    height:auto;
    max-height:100%;
    left:50%;
    width:auto;
    max-width:100%;
    position:relative;
    top:50%;
    transform:translatex(-50%) translatey(-50%);
}

<div><img src="http://lorempixel.com/600/400/nature/3/"></div>