响应图像按窗口高度缩放

Question

与将图像设置为:相同的方式:

img {max-width: 100%;}

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

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

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

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

Answer 1

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

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