html/css 不能用百分比改变图像高度

Question

所以我有一个带有文件服务器的简单小域。 我希望主页只是一个图像。 我还希望该图像占据浏览器窗口高度的一半，因此我编写了一些带有内联样式的 html。是的，我是这方面的初学者，所以我现在只知道基本的 html 和 css。

<img src="fruit.png" alt="a bowl of fruit" style="max-width:auto;max-height:50%;">

我试了一下，图像以全分辨率愉快地显示，完全忽略了我的样式，所以我稍微玩了一下，最终发现类似的东西

<img src="fruit.png" alt="a bowl of fruit" style="max-width:auto;max-height:500px;">

和

<img src="fruit.png" alt="a bowl of fruit" style="width:50%;">

工作得很好，但我使用百分比的原因是因为我希望大小根据浏览器窗口大小进行缩放。 所以我想弄清楚我在这里做错了什么，或者是否存在一些错误，或者我只是个白痴而修复是非常明显的。

Answer 1

img 必须有一个绝对位置!否则 max-height 不会做任何事情。 此外，不允许使用值“auto”。

<style>
img {
    position: absolute;
    max-height: 50%;
}
</style>
<img src="fruit.png" alt="a bowl of fruit"/>

或

<img src="fruit.png" alt="a bowl of fruit" style="position: absolute; max-height: 50%;"/>