使图像高度敏感

Question

我在我的网站上有一个图像，它的高度大于它的宽度。

问题是，在小屏幕中图像非常高，我想以某种方式限制它，并将max-height设置为屏幕的高度（响应）。

我使用Bootstrap，所以我用.img-responsive类，但它不起作用。

下面是一个例子：http://jsfiddle.net/dqsLt4sa/1/

感谢。

Answer 1

您可以使用vh unit。

max-height: 100vh; 

要指定没有图像应大于屏幕使用下面的CSS

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