响应式图像（宽度和高度）答案

【问题标题】：Responsive image (width and height)响应式图像（宽度和高度）
【发布时间】：2015-08-31 20:10:19
【问题描述】：

我正在为摄影师创建一个简单的作品集网页。他想在网上展示他的照片。所以图像应该是响应式的。所以我在图像类中写了以下代码：

img {
    max-width: 75%;
    height: auto;
}

所以它使图像适合任何屏幕的宽度，但我想以全高显示图像。因此，如果图像的高度较大，用户必须向下滚动才能看到整个图像。那么我应该如何设置高度，以便立即显示整个图像？

关于，

安德烈

【问题讨论】：

【解决方案1】：

您是否尝试过相同的反转，例如，尝试给它一个高度，然后将宽度保留为自动..!!!

因为你只需要设置两者中的一个，另一个相应地调整......

【讨论】：

【解决方案2】：

简单：

max-height: 100%; /* or a bit less */

但请注意the docs 所说的内容：

<percentage> 是根据包含块的高度计算的。如果未明确指定包含块的高度，则百分比值被视为无。

【讨论】：

【解决方案3】：

好的，我找到了解决方案。我只是用 vh 单位（视口高度）设置了最大高度。谢谢你的帮助。

【讨论】：

【解决方案4】：

试试这个方法：img{max-width:100%; max-height:100%;}

【讨论】：