Question

我的图像高度比我想要的高度低。 div的宽度是固定的。 div的高度不固定其动态。如何实现这一目标。我试过css 最大宽度：100％; 最大高度：100％; 但它不起作用。

Answer 1

你可以只用css做这个，让左边的div和图像位置绝对，让它适合容器的高度，容器的高度将由右边div中的内容决定。

<div class="outer">
  <div class="left">
    <img src="source.jpg"/>
  </div>
  <div class="right">
    Content which will determine height of both divs
  </div>
</div>

<style>
  .outer {
    position: relative;
  }

  .left {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%
  }

  .left img {
    position: absolute;
    top: 0;
    bottom: 0;
  }

  .right {
    margin-left: 50%;
  }
</style>

Answer 2

您可以使用CSS属性object-fit（Current browser support）

只需在img

上设置object-fit: cover;即可

来自MDN：

封面

替换内容的大小可以保持其宽高比   填充元素的整个内容框：其具体对象大小为   解析为元素使用宽度的封面约束   高度。

在div中拟合图像，其高度高于图像

2 个答案:

Codepen demo