我img在液体中有一个元素div.img的max-height设定为100%.因此,如果图像高于div,则应该渲染为div高.
.png文件的原始大小为200x200.在我的浏览器中,div显示为284x123.因此,img应该在123x123处渲染,以保持其纵横比.
然而,img打破了div的界限,仍然显示为200x200.我似乎无法弄清楚为什么会这样.
这种情况发生在Chrome上,但不适用于Firefox(我上次尝试过).
您可以在此处查看当前状态(http://paginas.fe.up.pt/~ei07171/test/).如果你将鼠标悬停在图片的左侧,你会看到一个灰色的箭头,我正在谈论的.png.右侧的箭头是SVG文件,可以正常工作.
编辑:我已经创建了一个单独的jsfiddle(http://jsfiddle.net/dcastro/3Ygwp/1/),其中img的max-height似乎正常工作..我找不到我的项目是什么导致它不去工作.
dca*_*tro 40
我想到了.要使元素的max-height起作用,其父元素之一必须height定义一个属性(显然是固定单位,如px,而不是百分比).
从w3c规格来看:
百分比是根据生成的框的包含块的高度计算的.如果未明确指定包含块的高度(即,它取决于内容高度),并且此元素未绝对定位,则百分比值将被视为"0"(对于"min-height")或"none" ('max-height').
由于我的img的父级都没有定义固定的高度,所以我不得不将img限制为max-width.
编辑:此外,似乎webkit的规格有点过于字面上:https://stackoverflow.com/a/3808701/857807
我使用了该线程中提供的解决方法,并使用了position: absolute; max-height: 100%; top: 0.