Question

我在容器中有一个图像：

.img-container {
  max-height: 100px;
}

img {
  width: 100%;
  max-width: 100%;
}

<div class="img-container">
  <img src="https://vignette.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437">
</div>

但是图像不尊重它父母的最大高度。我怎样才能做到这一点？

我无法在图像上将高度设置为100％，因为它会使宽高比变粗糙。

Answer 1

尝试在img上使用object-fit：

.img-container {
    max-height: 100px;
    height: 100px;
}

img {
    width: auto;
    max-height: 100%;
    object-fit: contain;
}

修改 替代对象

.img-container {
    max-height: 100px;
    width: 100px;
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}


<div class="img-container" style="background-image: url('https://vignette.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437');"></div>

Answer 2

重要的是图像具有定义的高度，因为它不会占据父亲的高度

.img-container {
  max-height: 100px;
  border: 1px solid red;
}

img {
  width: 100%;
  /*set*/
  height: 100px;
}

<div class="img-container">
  <img src="https://vignette.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437">
</div>

图像不尊重父母的最大身高

2 个答案: