响应图像按窗口高度缩放

Question

与将图像设置为：

的方式相同

img {max-width: 100%;}

例如：https://jsfiddle.net/kvp7n29n/10/ ...当您使浏览器窗口的宽度变小时，按比例缩放图像，如何获得相同的缩放效果浏览器的高度变小 ？

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

^^我不一定想制作灯箱本身，但是当你点击那里的单个图像演示时，注意到灯箱会出现图像，无论你缩小浏览器窗口的宽度或 height ，灯箱中的图像在缩小时保持成比例。

那么我如何在上面的jsfiddle中对那只小猫进行同样的比例缩放效果呢？

Answer 1

您可以设置vh（视口高度）和vw（视口宽度）单位的最大高度和宽度。小提琴：https://jsfiddle.net/kvp7n29n/12/

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