使图像高度响应

Question

我的网站上有一张图片，其高度大于它的宽度。

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

我使用的是Bootstrap，所以我使用了max-height类，但它没有用。

以下是一个示例：http://jsfiddle.net/dqsLt4sa/1/

感谢。

Answer 1

您可以使用vh unit。

max-height: 100vh;

要指定任何图像都不应大于屏幕，请使用以下CSS

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