响应图像按窗口高度缩放

Question

同样，将图像设置为：

img {max-width: 100%;}

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

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

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

那么，我如何才能得到同样的比例缩放效果，发生在小猫在我的小提琴上面？

Answer 1

您可以在vh(视口高度)和vw(视口宽度)单位中设置最大高度和宽度.小提琴：https://jsfiddle.net/kvp7n29n/12/

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