使圖像高度敏感

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; 
}