按窗口高度进行响应式图像缩放[重复]

Question

和设置图片一样：

img {max-width: 100%;}

如：https://jsfiddle.net/kvp7n29n/10/ ... 当你让浏览器窗口的宽度变小时，按比例缩放图像如何在浏览器窗口的宽度变小时得到同样的缩放效果高度变小了？

我想要完成的最终效果就像您在许多响应式灯箱上看到的一样，例如：http://dimsemenov.com/plugins/magnific-popup/。

^^ 我不一定要自己制作灯箱，但请注意，当您单击那里的单个图像演示时，灯箱会显示图像，无论您是否缩小浏览器窗口的 宽度 或 height，灯箱中的图像在缩小时保持比例。

那么，如何在上面的 jsfiddle 中的那只小猫身上产生同样的比例缩放效果？ .

Answer 1

您可以以 vh(viewport height) 和 vw(viewport width) 为单位设置最大高度和宽度。小提琴：https://jsfiddle.net/kvp7n29n/12/

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