Question

我使用普通的旧css没有bootstrap或任何东西。我想让img元素响应，从而缩小和扩展，同时保持其比例达到最大高度。我查看了几个SO响应，但没有找到与我的用例匹配的东西。我怎么做到这一点。我有点使用以下代码。

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


img
  :max-width 100%
  :height auto

.imageContainer
  max-height: 300px

此解决方案随着图像变小而起作用，当图像变大到div的最大高度时图像图像溢出时，它会起作用。我希望它保持在div内，同时保持其比例。我已经在img和div上尝试了使用max-height的各种组合，但还没有让它工作。感谢您提供的任何帮助！

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

Answer 1

尝试将css top和bottom属性设置为0px。

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

Answer 2

要将图像设置为div的最大高度，必须从其父级继承成像器的height属性。围绕它的答案和理论可以在这里找到：Child with max-height: 100% overflows parent

.container {
    background: blue;
    padding: 10px;
    max-height: 100px;
    max-width: 100px;
    text-align:center;
}

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

Answer 3

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

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

你如何在一个div内做出一个img响应到最大高度？

3 个答案: