我在液体img中有一个div元素。该img的max-height设置为100％。因此，如果图像高于div，则应该渲染为div高。
.png文件的原始大小为200x200。在我的浏览器中，div显示为284x123。因此，img应该以123x123渲染，以保持其宽高比。
然而，img打破了div的界限，仍显示为200x200。 我似乎无法弄清楚为什么会这样。
这种情况发生在Chrome上，但不适用于Firefox（我上次尝试过）。
您可以看到当前状态here（http://paginas.fe.up.pt/~ei07171/test/）。 如果您将鼠标悬停在图片的左侧侧，您会看到一个灰色箭头，我正在谈论的.png。右侧的箭头是SVG文件，可以正常工作。
编辑：我创建了一个单独的jsfiddle（http://jsfiddle.net/dcastro/3Ygwp/1/），其中img的max-height似乎正常工作..我无法找到我的项目上的内容它不起作用。
答案 0 :(得分：35)
我明白了。要使元素的最大高度起作用，其父元素之一必须定义height属性（显然是固定单位，如px，而不是百分比）。
来自w3c specs：
百分比是根据高度来计算的 生成的框包含块。如果含有的高度 未明确指定块（即，它取决于内容 高度），这个元素并不是绝对定位的百分比 值被视为'0'（对于'min-height'）或'none'（对于 '最大高度'）。
由于我的img的父级都没有定义固定高度，所以我不得不将img限制为max-width。
编辑：此外，似乎webkit对字面意思的规格有点过分：https://stackoverflow.com/a/3808701/857807
我使用了该主题中提供的解决方法，并使用了position: absolute; max-height: 100%; top: 0。
答案 1 :(得分：6)
我也遇到了这个问题，我设法使用CSS中的vh单位在不同的浏览器中获得一致的高度，例如max-height: 5vh;和视口高度的5％。
答案 2 :(得分：0)
尝试将宽度和高度属性添加到img的
还可以在HTML中设置自然尺寸以帮助浏览器呈现。
HTML
<img src="img/mywine/2high.png" width="123px" height="123px">
CSS
img{
max-width: 100%
height: auto;
}
答案 3 :(得分：0)
根据@dcastro答案（我完全同意），任何父元素必须具有固定值（如px），而不是相对值（如％）。 因此，使用Jquery的一个小技巧只能使用相对值
<div id="E_slick" style="height: 75%">
<img class="eve_img" src="myfile.jpg" style="max-width: 100%; max-height:100%">
</div>
因此，诀窍是获取引擎盖高度并将其设置为img，以使其更容易使用jQuery：
$('.eve_img').height( $("#E_slick").height() )
答案 4 :(得分：0)
如果您仍然希望容器基于％而不是px，则可以使容器display: flex和图像
object-fit: contain;
max-width: 100%;