Question

我有以下代码：

#container {
  background: steelblue;
  width: 333px;
  height: 333px;
}

picture img {
  object-fit: cover;
}

<div id="container">
  <picture>
    <img src="http://placekitten.com/g/300/300" alt="kitten">
  </picture>
</div>

如何让图片填满容器盒？

Here's a codepen

Answer 1

你必须在'picture'元素中使用display:flex（与'{1}}属性一起用于'img'）

这适用于任何大小的容器。

像这样：

object-fit

#container {
  background: steelblue;
  width: 333px;
  height: 500px;
  
}
picture {
  width: 100%;
  height: 100%;
  display: flex;
 
}
picture img {
 object-fit: cover; 
    height: auto;
    width:100%;
}

Answer 2

你必须拉伸BOTH图片和img元素：

#container {
  background: steelblue;
  width: 333px;
  height: 333px;
}

picture, img {
  width: 100%;
  height: 100%;
}

Answer 3

只需在您的img中添加width: 100%;即可。如果两者都是正方形，它将适合容器。

Answer 4

最简单的方法是将width和height添加到img：

img {
  width : 100%;
  height: 100%;
}

还可以使用object-fit CSS属性指定如何调整元素大小以适合其容器。保留宽高比：

object-fit: contain;

根据MDN documentation：

<强>包含

缩放替换的内容以保持其宽高比   同时适合元素的内容框。

Answer 5

我花了很长时间才弄清楚，因为我试图将width: 100%的样式添加到图片标签，而不是直接将其添加到'img'标签。

使图片元素中的图像适合其容器

5 个答案: