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

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

当显示这些图像“整页”时，我希望能够将纵向图像的高度设置为100%（通过浏览器计算宽度，以考虑纵横比），将横向图像的宽度设置为100%

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

---

---

或者，如果不可能，则为图像提供服务的服务器可以对每个图像的大小进行评估，并将“纵向|横向”作为元数据发送；最有效的方法是什么（比如用PHP？

这里的技巧是设置要将图像限制在其父容器上的维度，然后将图像的维度设置为

auto

，最大维度设置为100%

这里有一个快速的例子，其中有一些定位，以保持图像居中；通过调整

div

和图像的大小进行测试

div{
背景：黑色；
高度：300px；
宽度：600px；
}
img{
高度：自动；
最大高度：100%；
左：50%；
宽度：自动；
最大宽度：100%；
位置：相对位置；
最高：50%；
转化：translatex（-50%）translatey（-50%）；
}

---

我认为您应该只从后端获取此信息。在这种情况下，您不应该依赖客户端。