css - 按窗口高度缩放响应式图像

<分区>

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

img {max-width: 100%;}

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

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

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

那么如何在我上面的 jsfiddle 中的那只小猫上获得相同的比例缩放效果？ .

最佳答案

您可以以 vh(视口(viewport)高度)和 vw(视口(viewport)宽度)为单位设置最大高度和宽度。 fiddle :https://jsfiddle.net/kvp7n29n/12/

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

关于css - 按窗口高度缩放响应式图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30699935/

相关文章：

css - 响应式网页设计 - 使用 px 值