如何使用浏览器高度调整图像大小？

Question

编辑1：我以为我会澄清我的帖子。基本上，我希望我的照片相对于浏览器窗口高度调整大小，但总是留下大约margin-bottom。它与页面底部之间的40px。但是，它不起作用。相反，浏览器确保它可以容纳整个图像，因此它将页面扩展到它应该结束的位置。

令人困惑的部分，抱歉：我的图片设置为根据浏览器高度调整大小。图像确实调整了大小（我给了所有祖先height:100%和图像height:98%，但它很快就会到达整个图像不再可见的点，因为它太大而不适合解决这个问题的最简单方法是将图像的高度降低到较小的百分比值，但我不想这样做。

我在页面底部有一个绝对定位的页脚，这证明是有问题的。我原来的想法是将图片的margin-bottom（或padding-bottom）设置为20px（我的顶层菜单和图片之间的距离相同），所以我的页脚和即使在调整浏览器大小时，也始终保持图像。但显然这不会起作用，因为页脚绝对定位。

我的另一个想法是将px高度设置为body或html，但这也不起作用，就好像用户的屏幕大于此页面一样将被限制在px高度。关于如何解决这个问题的任何想法？

下面是我的问题的截图。版权等是页脚，它实际上位于页面的底部，但是图像已经将这个底部推得更远了。

哦，我还想添加，是否可以根据高度和宽度设置图像调整大小，使用％因子？

Answer 1

有些单位分别使用vw和vh来处理视口高度和宽度的百分比。

img{
   height:100vh;
}

这使得所有img元素都是视口（窗口）高度的100％。

Answer 2

您遇到的问题似乎是页脚没有停留在页面底部。你已经完全定位了它，即使图像也没有移动。图像正确移动（正确吗？）

您可以设置页脚随浏览器调整大小移动以解决此问题。这在jQuery中是最容易的，如果你正在使用它（但在JS中可能）：

$(document).resize(function() {
    $("#FOOTER_ID_HERE").css("top", $(document).height() - 20);
});

至于你的第二个问题，可以将图像设置为一定的高度和宽度（以容器的大小调整）。

Answer 3

HTML：

<footer>
    <small>Copyright &copy; Tim Conn Photography 2015. All rights reserved.</small>
</footer>

CSS：

footer {
    position: absolute; 
    bottom: 0; /* footer will always be in the bottom even when resized */
    padding: 40px 0;
    width: 100%;
    clear: both;
    background-color: #ddd;
    overflow: hidden;
}