如何使用CSS使图像按屏幕高度调整大小？

Question

与许多希望图像填满整个屏幕的人不同，我只关心图像的高度。如何使用CSS（最好不要使用JavasScript）使任何大小的图像填充到最大可能的浏览器窗口高度，同时保持图像的宽高比，调整后的图像宽度与浏览器无关。

我正在使用以下html：

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

非常感谢！

- Mohammad

Answer 1

img { height:100% }

或者如果你希望更明确

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

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

编辑：

这个答案需要一些注意。演示已经损坏并且通常是一个混乱。我用新的图像更新了它，更新了规则以补偿图像的内联性质，并标准化了正文和HTML元素的高度和宽度。

- Joseph Marikle

---

@Vickel 实际上看起来 jsfiddle 可能存在服务器问题。我收到了一个 500 内部服务器错误。 - Joseph Marikle

Answer 2

这可能有些过头了：

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

- Joe

---

不错，这个想法是对的，除非它在一个容器中，否则你不需要定位、顶部或底部。重要的是让宽度自适应。 - Joseph Marikle

是的，正如Joseph所说，顶部或底部并不是真正需要的。 - Mohammad

从我所看到的来看，你真正需要做的是寻址你的容器。这个方法本质上是从容器中移除元素。尝试将你的图像div设为 position:absolute;left:0;top:0;height:100%。 - Joseph Marikle

Answer 3

你可能还想看一下vh，vw，vmin和vmax CSS单位-它们相当受支持。这里有一篇很好的文章描述了如何实现100%的高度here。

顺便提一下-注意空格：这可能会添加不需要的边距。删除空格，添加float，或使用font-size: 0 hack来解决这个问题。此外，使用其他方法时，请记得为body和html元素设置height: 100%。

- Sam Dutton