css3 设置图片自适应

CSS3是前端开发中常用的样式语言。在网页设计中，自适应的图片可以在不同的设备和屏幕大小下适应不同的分辨率，实现完美的布局。

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

上面的示例代码使用了max-width属性和height属性。其中，max-width设置了图片的最大宽度为100%，这样可以确保图片在不同的设备和屏幕下不会超出页面的宽度。而height设置为auto，则可以保证图片按比例缩放，不会变形。这样，无论是在小屏幕移动设备上还是在大屏幕电脑上，图片都可以自适应。

此外，还可以使用CSS3中的@media规则来设置不同屏幕大小下的图片显示效果。例如：

@media screen and (max-width: 768px) {
  img {
    max-width: 100%;
    height: auto;
  }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
  img {
    max-width: 100%;
    height: auto;
  }
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
  img {
    max-width: 100%;
    height: auto;
  }
}

@media screen and (min-width: 1200px) {
  img {
    max-width: 100%;
    height: auto;
  }
}

上面的代码中，使用了@media规则来设置了不同屏幕大小下的图片显示效果。通过这种方法，可以实现不同屏幕大小下，图片自适应的效果，从而达到更好的用户体验。