使图像高度响应[关闭]

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