Img 的最大高度不考虑父母的尺寸答案

【问题标题】：Img's max-height not respecting parent's dimensionsImg 的最大高度不考虑父母的尺寸
【发布时间】：2020-11-24 19:01:34
【问题描述】：

我在液体div 中有一个img 元素。该 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 的最大高度似乎可以正常工作。我找不到我的项目中的原因上班。

【问题讨论】：

标签： html css

【解决方案1】：

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

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

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

编辑：另外，webkit 似乎对规范的理解有点过于字面：https://stackoverflow.com/a/3808701/857807

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

HTML

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

CSS

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

【讨论】：

那不是我在说的图片。我的意思是当您将鼠标悬停在左侧时出现的灰色箭头。不过，我尝试在 HTML 上添加高度和宽度属性，并在css上将宽度设置为自动，但它不起作用。
问题一定出在我的 DOM 上，因为相同的 div/img 配置适用于 jsfiddle（我已将其附加到我编辑的帖子中）。
我认为您正在与所有这些 ID 进行特异性战争。我认为使用类可以防止这个问题。我正在努力。
'png-container' 有一个 position:relative ，我认为不需要在那里。我认为您也可以删除它所附加的
。标记中的 div 中的许多 div 和大量使用 ID 会让您受益。
相对位置用于使 div 垂直居中，使用 height: 20%; top: (50-20/2)% 技术。我只使用 3 个 ID，因为我知道 DOM 中只会有一个。改用类有什么好处？我弄清楚了问题所在，并发布了答案。

【解决方案5】：

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

【讨论】：