如何在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>