[分享]css中如何将图片填满div

在网页设计中，我们经常会遇到需要将图片填满指定的div元素的情况。这就需要用到CSS样式来达到这个效果。首先，我们需要设置div元素的宽高，保证图片可以被正确的呈现。随后，我们设置图片的CSS样式。具...

在网页设计中，我们经常会遇到需要将图片填满指定的div元素的情况。这就需要用到CSS样式来达到这个效果。

首先，我们需要设置div元素的宽高，保证图片可以被正确的呈现。随后，我们设置图片的CSS样式。

具体的CSS代码如下：

div {
  width: 100%;
  height: 200px;
  position: relative;
}

div img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
} 

上面的CSS代码中，我们使用了position属性将图片定位为绝对定位，使图片可以脱离文档流，不会影响到其它元素。接着，我们使用width和height设置图片的宽高，将其填充满div元素。

object-fit属性是一个比较新的CSS属性，它指定了在图片容器中如何适应图片。在这里，我们使用了cover值，它会将图片等比例缩放，直到它的某一边撑满容器为止，其它边超出容器范围并被裁剪。

这样，我们就可以将图片完美的填满div元素了。如果你需要支持旧版浏览器，可以考虑使用background-image属性来实现类似的效果。