Question

网页包含有时在＆＃34;肖像＆＃34;模式（高度>宽度），有时在＆＃34; landscape＆＃34;模式（宽度>高度）。

当显示这些图像＆＃34;整页＆＃34;时，我希望能够将肖像图像的高度设置为100％（通过浏览器计算宽度以便尊重宽高比）相反，景观图像的宽度为100％。

这在JavaScript中很简单，但是在没有JavaScript的情况下，有没有一种方法/技巧可以在CSS中使用？（对于很可能禁用JavaScript的内部网站而言;但是使用的浏览器是现代的，因此如果需要，可以使用CSS3。）

或者，如果不可能，则服务于图像的服务器可以评估每个图像的大小并发送＆＃34;肖像|风景＆＃34;作为元数据;什么是最有效的方法（比如用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>

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

1 个答案: