html - Img 的最大高度不考虑父母的尺寸

Question

我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 似乎工作正常.. 我找不到我的项目是什么导致它不工作。

score 57 · Accepted Answer

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

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

由于我的 img 父级都没有定义固定高度，因此我不得不将 img 限制为最大宽度。

编辑：另外，webkit 似乎有点过于字面化了：https ://stackoverflow.com/a/3808701/857807

我使用了该线程中提供的解决方法，并使用了position: absolute; max-height: 100%; top: 0.

score 9 · Accepted Answer

我也遇到了这个问题，我设法使用vhCSS 中的单位在不同的浏览器中获得一致的高度，例如max-height: 5vh;视口高度的 5%。

score 1 · Accepted Answer

如果您仍然希望容器基于 % 而不是 px，则可以将容器display: flex和图像

object-fit: contain;
max-width: 100%;

score 0 · Accepted Answer

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

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

HTML

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

CSS

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

score 0 · Accepted Answer

根据@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() )

5 回答 5