最大高度：img 的 100% 在嵌套 div 中不起作用 [重复]答案

【问题标题】：max-height: 100% for img does not work in nested divs [duplicate]最大高度：img 的 100% 在嵌套 div 中不起作用 [重复]
【发布时间】：2018-10-21 04:22:08
【问题描述】：

我正在尝试为图像设置max-height: 100%，即在几个嵌套容器中。图像的父母之一具有以像素为单位的高度。但是图片仍然超过了父母的身高。

不同用途需要嵌套容器：

div.grid-container 具有以像素为单位的固定宽度和高度，以限制元素的整体大小。
div.image-container 用于内部用途（fiters、mirror、javascript 行为）。
img 本身不能超过整体大小。

我认为如果父母之一的高度是固定的，那么将max-height 设置为任何内部元素都会将其高度限制为父母的高度。不幸的是，这不起作用（参见 sn-p）。

我知道我可以以像素为单位设置图像的max-height（200px，作为网格容器的高度），但是这个小部件是为在不同的地方使用而设计的，所以我事先不知道它是容器的确切高度，我只知道已经修好了。

如何在不使用 JavaScript 且仅使用 CSS 的情况下使图像不超过容器的高度？

/* page grid element- has fixed height and width */
.grid-container {
  width: 200px;
  height: 200px;
  background-color: green;
}
 
/* Image container - required for some purposes, must not exceed container size */
.image-container {
  outline: 5px solid red;
  max-width: 100%;
  max-height: 100%;
}

/* image must not exceed it's container */
img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

<h2>does not work - image height exceeds container's height</h2>
<div class="grid-container">
  <div class="image-container">
    <img src="http://via.placeholder.com/150x300">
  </div>
</div>

<br>
<br>
<br>
<br>
<br>
<br>
<br>

<h2>for width it works as expected</h2>

<div class="grid-container">
  <div class="image-container">
    <img src="http://via.placeholder.com/300x150">
  </div>
</div>

【问题讨论】：

% max-height 应该有一个高度作为工作参考
@TemaniAfif 有一个参考 - div.grid-container 的高度以像素为单位。 “已经有答案”的问题不同，因为那个问题没有固定高度的容器。
引用应该是父元素......图像的父元素应该设置一个高度以允许最大高度的百分比工作......逻辑是相同的：max-height/ % 的高度需要在父元素上定义一个高度，即重复问题中的说明
这是你的答案：stackoverflow.com/a/14263416/8620333

标签： html css image

【解决方案1】：

我无法直观地看到您的代码，但我相信您需要在图像上设置一个高度。在这种情况下，您可以放置 height: 100%;和宽度：自动；或宽度：100%；高度：自动；在图像本身上，这将保持纵横比并降低高度

【讨论】：