Html 如何在潜水舱内使img响应到最大高度？

我使用的是普通的旧css，没有引导或任何东西。我想让img元素具有响应性，从而在保持最大高度的同时收缩和扩张。我已经查看了几个SO响应，但没有找到与我的用例相匹配的东西。我将如何实现这一点。我有它的工作与以下代码

   <div class="imageContainer">
      <img src="{{employee._image}}">
   </div>


img
  :max-width 100%
  :height auto

.imageContainer
  max-height: 300px

img
：最大宽度100%
：高度自动
.imageContainer
最大高度：300px

此解决方案在图像变小时起作用，在图像变大到div的最大高度时起作用，此时图像溢出。我希望它在保持其比例的同时保持在该分区内。我已经尝试过在img和div上使用max height的各种组合，但都没有成功。感谢您提供的任何帮助

---

图像必须动态设置，因此不能使用背景图像对css中的url进行硬编码。

尝试将

css

top

和

bottom

属性设置为

0px

img
    :max-width 100%
    :height auto
    :top 0px
    :bottom 0px

---

要将图像设置为div的最大高度，必须从其父级继承成像仪的height属性。 答案和理论可以在这里找到：

---

我相信我能够像这样实现你的目标：

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

---

看看这里。谢谢，你使用inherit关键字的解决方案可以解决这个问题，现在我有了图像居中的问题，但这是另一个问题。我在列表中添加了答案，但是如果你可以关闭帖子，那么继续。只是打零头。我还认为您的居中问题是通过所示的

text align

属性解决的。我认为您不需要在图像上自动显示高度。尝试删除“自动高度”，并将最大高度300添加到img

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