如何使用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

这可能有点矫枉过正：

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

Answer 3

您可能还想看看 vh、vw、vmin 和 vmax CSS 单位 \xe2\x80\x93，它们得到了很好的支持。这里有一篇很好的文章描述了如何实现 100% 高度。

\n\n

BTW \xe2\x80\x93 请注意空格：这可能会增加不需要的边距。删除空格、添加浮动或使用font-size: 0hack 可以解决这个问题。另外，在使用其他方法时，请记住height: 100%为 body 和 html 元素进行设置。

\n