css3媒体图片自适应

在网页设计开发中，我们经常会遇到需要在不同大小的屏幕上显示不同尺寸的图片的情况。css3媒体图片自适应技术可以帮助我们解决这一问题。

我们可以使用css属性“max-width”和“height:auto”来实现图片根据浏览器窗口大小自动调整。

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

以上代码的意思是：图片的最大宽度为100%，高度自动调整。

此外，我们还可以针对不同的屏幕大小设置不同的样式。

/* 当屏幕大小小于768px时，图片宽度为100% */
@media screen and (max-width: 768px) {
  img {
    width: 100%;
  }
}

/* 当屏幕大小在768px和1200px之间时，图片宽度为50% */
@media screen and (min-width: 768px) and (max-width: 1200px) {
  img {
    width: 50%;
  }
}

/* 当屏幕大小大于1200px时，图片宽度为30% */
@media screen and (min-width: 1200px) {
  img {
    width: 30%;
  }
}

以上代码的意思是：当屏幕宽度小于768px时，图片宽度为100%；当屏幕宽度在768px和1200px之间时，图片宽度为50%；当屏幕宽度大于1200px时，图片宽度为30%。

总之，css3媒体图片自适应技术可以帮助我们在不同的屏幕上优雅地展示图片。我们可以根据屏幕大小设置不同的样式，让图片自动适应并兼容各种设备。