最大高度：100%，因为img在嵌套div中不起作用[重复]

Question

我正在尝试为图像设置max-高度：100%，即在几个嵌套容器内。图像的父级之一具有像素高度。但是图像仍然超过父级的高度。

嵌套容器有不同的用途：

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

我认为，如果父母中的一方有固定的高度，那么将“最大高度”设置为任何内部元素都会将其高度限制为父母的高度。不幸的是，这并没有起作用（请参阅代码片段）。

我知道我可以以像素为单位设置图像的最大高度（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>

Answer 1

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