Img的最大高度不尊重父母的尺寸

I have an img element inside a liquid div. That img has its max-height set to 100%. So, if the image is taller than the div, it should be rendered as tall as the div.

我在液体div中有一个img元素。 img的最大高度设置为100％。因此，如果图像高于div，则应该渲染为div高。

The original size of the .png file is 200x200. In my browser, the div shows as 284x123. Therefore, the img should be rendered at 123x123, to keep its aspect ratio.

.png文件的原始大小为200x200。在我的浏览器中，div显示为284x123。因此，img应该以123x123渲染，以保持其纵横比。

However, the img is breaking the div's bounds and still shows as 200x200. I can't seem to figure why this is happening.

然而，img打破了div的界限，仍然显示为200x200。我似乎无法弄清楚为什么会这样。

This is happening on Chrome, but not on Firefox (last time I tried).

这种情况发生在Chrome上，但不适用于Firefox（我上次尝试过）。

You can see the current state here (http://paginas.fe.up.pt/~ei07171/test/). If you hover over the left side of the picture, you'll see a grey arrow, the .png that i'm talking about. The arrow on the right side is a SVG file and works correctly.

您可以在此处查看当前状态（http://paginas.fe.up.pt/~ei07171/test/）。如果你将鼠标悬停在图片的左侧，你会看到一个灰色箭头，我正在谈论的.png。右侧的箭头是SVG文件，可以正常工作。

Edit: I've created a separate jsfiddle (http://jsfiddle.net/dcastro/3Ygwp/1/), where the img's max-height seems to work correctly.. I can't find what on my project is causing it not to work.

编辑：我已经创建了一个单独的jsfiddle（http://jsfiddle.net/dcastro/3Ygwp/1/），其中img的max-height似乎正常工作..我找不到我的项目导致它不去工作。

3 个解决方案

#1

I figured it out. For an element's max-height to work, one of its parents must have a height attribute defined (apparently in a fixed unit, like px, not in percentage).

我想到了。要使元素的max-height起作用，其父元素之一必须定义一个height属性（显然是固定单位，如px，而不是百分比）。

From the w3c specs:

从W3c规格：

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as '0' (for 'min-height') or 'none' (for 'max-height').

百分比是根据生成的框的包含块的高度计算的。如果未明确指定包含块的高度（即，它取决于内容高度），并且此元素未绝对定位，则百分比值将被视为“0”（对于“min-height”）或“none” （'max-height'）。

Since none of my img's parent have a fixed height defined, I had to limit my img to max-width instead.

由于我的img的父级都没有定义固定高度，所以我不得不将img限制为max-width。

Edit: Also, it seems webkit takes the specs a little too literally: https://*.com/a/3808701/857807

编辑：此外，似乎webkit的规格有点过于字面上：https：//*.com/a/3808701/857807

I used the workaround presented in that thread, and used position: absolute; max-height: 100%; top: 0.

我使用了该线程中提供的解决方法，并使用了position：absolute;最大高度：100％;顶部：0。

#2

I bumped into this as well and I managed to get a consistent height across different browsers using vh units in CSS, for example max-height: 5vh; as in 5% of the viewport height.

我也碰到了这一点，我设法在CSS中使用vh单位在不同的浏览器中获得一致的高度，例如max-height：5vh;与视口高度的5％相同。

#3

Try adding the width and height attributes to your img's

尝试将宽度和高度属性添加到img中

Also set the natural dimensions in your HTML to help the browser render.

还可以在HTML中设置自然尺寸以帮助浏览器呈现。

HTML

<img src="img/mywine/2high.png" width="123px" height="123px">

CSS

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

#1