关于css：按窗口高度缩放响应图像

Responsive image scaling by the height of the window

本问题已经有最佳答案，请猛点这里访问。

与将图像设置为：

1	img {max-width: 100%;}

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

我试图实现的最终效果就像你在许多响应式灯箱上看到的一样，比如：http://dimsemenov.com/plugins/magnic-popup/。

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

那么，我如何才能在我上面的jfiddle中得到同样的比例缩放效果呢？.

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

1
2
3
4
5
6

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