如何使用 CSS 将图像调整为屏幕高度？答案

【问题标题】：How to make an image resize to the screens height with CSS?如何使用 CSS 将图像调整为屏幕高度？
【发布时间】：2011-11-14 02:41:35
【问题描述】：

不像很多人想要一张图片填满整个屏幕，我只关心图片的高度。如何使用 CSS（最好不是 JavaScript）制作任意大小的图像，填充最大可能浏览器窗口 height 的 100%，同时保持图像的纵横比、重新调整大小的宽度相对于浏览器的图像无关紧要。

我正在使用这个 html：

<div class="images">
  <img/>
</div>

非常感谢！

【问题讨论】：

【解决方案1】：

img { height:100% }

或者如果你想明确表达

img { height:100%; width:auto; }

编辑：

这个答案需要引起注意。演示被破坏了，通常是一团糟。我用新图像更新了它，更新了规则以补偿图像的内联性质，以及 body 和 html 元素的规范化高度和宽度。

【讨论】：

【解决方案2】：

您可能还想看看 vh、vw、vmin 和 vmax CSS 单位——它们是pretty well supported。有一篇很好的文章描述了如何达到 100% 高度here。

顺便说一句——注意空格：这会增加多余的边距。删除空格、添加浮点数或使用font-size: 0 hack 将解决这个问题。另外，在使用其他方法时，记得为 body 和 html 元素设置height: 100%。

【讨论】：

【解决方案3】：

这可能有点矫枉过正：

.img {
    position: absolute;
    height: 100%;
    top: 0;
    bottom: 0;
}

【讨论】：

不，这是正确的想法，除非您不需要定位、顶部或底部，除非它在容器中。重要的部分是让宽度自动
是的，正如约瑟夫所说，顶部或底部并不是真正需要的。
呃..从我在这个中看到的，你真正需要做的是给你的容器寻址。此方法实质上是从容器中移除元素。尝试将您的图片设为 div position:absolute;left:0;top:0;height:100%。