css实现图片自适应div

CSS实现图片自适应最常用的方法是让图片宽度为100%，高度为auto。这样图片就可以根据div的宽高比例，自动适应大小了。

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

此外，我们还可以使用background-image的方式将图片作为div的背景图，然后使用background-size: cover; 让图片自适应div大小，不过需要注意的是，此方法并不能实现图片的实际缩放。

div {
  background-image: url('图片地址');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

还有一种比较常用的方式是使用object-fit属性，该属性可以让图片按照一定的规则缩放，与background-size: cover; 相似，但是可以实现对图片的实际缩放。

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