CSS调整百分比宽度不限制图像大小[重复]答案

【问题标题】：CSS adjusting percentage widths not capping image size [duplicate]CSS调整百分比宽度不限制图像大小[重复]
【发布时间】：2020-12-03 07:34:21
【问题描述】：

我正在尝试使图像适合横幅，由灰色区域显示。根据我的理解，将 img 高度设置为 100% 会导致其高度为其容器高度的 100%，即 div。但是，很明显，图像并没有根据 div 部分的高度调整大小。

对此必须有一个非常基本的答案，但我无法弄清楚为什么会发生这种情况。

<!DOCTYPE html>
<style>
  div {
    background-color: grey;
    height: 5%;
    max-height: 100px;
  }
  
  img {
    height: 100%;
  }
</style>
<html>
  <body>
    <div>
      <img src="https://mat3e.github.io/brains/img/3.jpg">
    </div>
  </body>
</html>

在下面粘贴我的评论： CSS: How can I set image size relative to parent height?

响应此链接，在提问者的代码中演示了添加固定高度，我没有立即发现我的错误是没有为外部容器相对的任何添加固定高度到 img （在我的情况下，）。我实际上意识到添加固定大小也可以，但我不想这样做，因为我希望将高度保持为百分比。

【问题讨论】：

这是一个答案。 stackoverflow.com/questions/19192892/…
这能回答你的问题吗？ CSS: How can I set image size relative to parent height?

标签： html css layout

【解决方案1】：

你至少需要给身体一个固定的高度。看看this。我编辑了你的代码，让它适合你。

【讨论】：

谢谢！这是我正在寻找的答案。 @Marfee虽然您提到的链接确实表明添加了固定高度，但我并没有立即发现我的错误是没有为相对于 img 的任何外部容器添加固定高度（在我的情况下，） .我实际上意识到向
添加固定大小也可以，但我不想这样做，因为我希望将高度保持为百分比。

【解决方案2】：

在img 标签中添加max-height: inherit;。图片的高度将如何适应父级的大小。

div {
    background-color: grey;
    height: 5%;
    max-height: 100px;
  }
  
  img {
    height: 100%;
    max-height: inherit;
  }

<div>
 <img src="https://mat3e.github.io/brains/img/3.jpg">
</div>

【讨论】：

我是否正确地说这仅适用于原始高度 >= 100px 的图像？
在我的示例中，图像的height 始终调整为您的灰色div。 height: 5%; 中的 div 的 height 调整为 max-height: 100px;。