响应式图片按窗口高度缩放

Question

以同样的方式设置图像：

img {max-width: 100%;}

比如在这里：https://jsfiddle.net/kvp7n29n/10/，当您缩小浏览器窗口的 宽度 时，图片会按比例缩小，我如何让图片在浏览器窗口的 高度变小时 也有同样的缩放效果呢？

我想实现的最终效果就像您在很多响应式灯箱上看到的那样，比如这个：http://dimsemenov.com/plugins/magnific-popup/。

^^ 我不一定想制作灯箱本身，但请注意，当您在那里单击单个图像演示时，灯箱会显示该图像，并且无论您缩小浏览器窗口的宽度还是高度，其中的图像都保持成比例缩小。

那么如何在我上面的jsfiddle中实现相同的等比例缩放效���呢？

- MetalEscape

Answer 1

您可以使用vh（视口高度）和vw（视口宽度）单位设置最大高度和宽度。示例: https://jsfiddle.net/kvp7n29n/12/

img {
    max-width: 100vw;
    height:auto;
    width:auto;
    max-height:100vh;
}

- gopalraju