Question

这是一个转贴，因为我没有评论我之前的问题的答案，因为我在未登录时提出了问题。

我试图阻止图像变得比浏览器窗口更高，这样观众就不必向下滚动以查看图像的其余部分。

但是，我无法弄清楚如何将图像的最大高度设置为浏览器窗口高度。

到目前为止，我有：

<!DOCTYPE html>
 <html>
 <head>
         <meta charset="utf-8">
         <title>TEST TITLE</title>
         <link rel="stylesheet" href="http://flip.hr/css/bootstrap.min.css">
 </head>

<body>

<div class="container">
        <img src="dovelow.jpg" alt="Dove">

</div><!-- .container -->

 </body>
</html>

Answer 1

嘿，这是一个jsfiddle

因为它使用jquery应该是跨浏览器

Answer 2

Or为图片添加课程：see this fiddle

Answer 3

更好的方法是，将width更改为低于100%，例如87%

Answer 4

有趣的是，我一直在寻找同样的事情。在我的网站上，我曾经使用max-height: 75%;来防止图像变得太大，但今天，我只是注意到，它停止了工作。它可能已停止工作几周，甚至几个月前。所以这令人失望。我认为它与最近的Chrome更新有关，或者可能是WordPress停止做的事情。

你知道，我的代码可能永远不会奏效。我只是觉得它确实如此。

无论如何，我一直在寻找一个解决方案并且非常沮丧......直到我找到了这个小宝石：

http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/

根据“视口高度”使用名为vh的单位或“视口宽度”使用vw，需要使用CSS。所以在我的情况下，它是max-height: 75vh;，如果你想保持图像高于浏览器窗口的75％。

所以无论你计划什么，这肯定会有所帮助。

将图像的最大高度设置为浏览器窗口高度

4 个答案: