如何使用CSS将图像调整到屏幕高度？

Question

与许多想要图像填满整个屏幕的人不同，我只关心图像高度。我如何使用CSS（最好不是JavasScript）制作任何尺寸的图像，填充最大可能的浏览器窗口高度的100％，同时保持图像的纵横比，重新调整宽度关于浏览器的图像无关紧要。

我正在使用这个html：

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

非常感谢你！

Answer 1

img { height:100% }

或者如果你想要明确

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

身高100％：http://jsfiddle.net/jmarikle/vz7q2bnk/
宽度100％：http://jsfiddle.net/jmarikle/vz7q2bnk/1/

编辑：

这个答案需要一些关注。演示被打破，一般都是一团糟。我用新图像更新了它，更新了规则，以补偿图像的内联性质，以及身体和html元素的标准化高度和宽度。

Answer 2

您可能还想查看vh，vw，vmin和vmax CSS单元 - pretty well supported。有一篇很好的文章描述了如何实现100％的高度here。

BTW - 小心空白：这可能会增加不必要的余量。删除空格，添加浮动或使用font-size: 0黑客将对此进行排序。此外，在使用其他方法时，请记住为body和html元素设置height: 100%。

Answer 3

这可能有点矫枉过正：

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