[分享]css中如何设置图片自适应

CSS中图片的自适应非常重要，可以使网站在不同设备上展示更加美观。下面介绍几种设置图片自适应的方法：/ 方法一：使用maxwidth属性，设置图片最大宽度 / img { maxwidth: 100;...

CSS中图片的自适应非常重要，可以使网站在不同设备上展示更加美观。下面介绍几种设置图片自适应的方法：

/* 方法一：使用max-width属性，设置图片最大宽度 */
img {
  max-width: 100%;
  height: auto;
} 

这种方法是比较常用的，意思是当图片的宽度超过其容器的宽度时，将图片缩放至容器的宽度。height: auto则可以保持图片的高宽比。

/* 方法二：使用background-size属性，设置背景图片大小 */
div {
  background-image: url("image.jpg");
  background-size: cover;
} 

这种方法是针对背景图片的，使用cover可以使图片充满整个容器，并自动缩放，但可能会使图片被裁剪。

/* 方法三：使用object-fit属性，设置图片填充方式 */
img {
  width: 100%;
  height: 200px;
  object-fit: cover;
} 

这种方法也是针对img标签的，使用object-fit: cover可以让图片充满整个容器，并自动缩放，但可能也会使图片被裁剪。