html - 如何使用 CSS 调整图像大小以适应其容器

Question

我想制作具有恒定宽度和高度的 div，其中包含一个大小未知的子图像。

像这样:

我得到的最接近的是 max-height: inherit; max-width: 继承 但它改变纵横比

.parent {
  border: 1px solid ;
  width: 40vh;
  height: 40vh;
  overflow: hidden;
  display: flex;
}

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

<div class="parent">
  <img src="https://images.pexels.com/photos/1123982/pexels-photo-1123982.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" />
</div>

我怎样才能做到这一点？

Answer 1

您需要使用 object-fit:cover css 属性来 img 或 video 应该调整大小以适合其容器。

运行下面的代码段。

.parent {
  border: 1px solid;
  width: 20vh;
  height: 20vh;
  overflow: hidden;
  display: flex;
}

img {
  max-width: inherit;
  max-height: inherit;
  height: inherit;
  width: inherit;
  object-fit: cover;
}

<div class="parent">
  <img src="https://images.pexels.com/photos/1123982/pexels-photo-1123982.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" />
</div>