Question

我正在制作一个艺术家网站，并希望添加一些我的作品的照片。我希望图像能够响应页面，这可以通过使最大宽度为100％来实现，但是图像的高度过长，需要查看者滚动才能查看整个图像。请参阅附件中的图像，其中一张适合在屏幕上显示图像，另一张可以在扩展页面使其不适合显示在屏幕上。

Photo 1

Photo 2

如何将图像设置为不超出当前窗口的高度？我尝试过使用max-height，但无济于事。任何建议，我们将不胜感激！

最好，韦斯顿·乌兰姆

Answer 1

html：

<head>
 <!-- add viewport meta to the head -->
 <meta name="viewport" content="width=device-width, height=device-height, user-scalable=yes, initial-scale=1.0">
</head>

css：

img {
   display:block;
   margin:auto;
   max-width:80vw;
   max-height:80vh;
}

设置添加图像的最大高度

1 个答案: