css中怎么设置图片自适应

CSS是前端开发中必不可少的一部分，其中一项常见的需求是如何设置图片自适应。下面将介绍三种方法来实现图片自适应。
第一种方法是使用以下代码来设置图片自适应：

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

这段代码将会使所有的图片都自适应父容器的宽度，同时保持高度的比例。这种方法的优点是简单易懂，可以快速实现自适应效果。
第二种方法是使用以下代码来设置背景图片自适应：

.background{
  background: url('image.png') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
} 

这段代码将会使背景图片自适应整个容器，并保持比例不变。这种方法的优点是可以自定义背景图片的样式，同时也是一种常用的实现方式。
第三种方法是使用以下代码来设置响应式图片：

.picture{
  max-width:100%;
  height:auto;
}

@media screen and (max-width: 480px) {
  .picture{
    max-width:60%;
  }
} 

这段代码会在视口宽度小于等于480px的时候，将图片宽度限制在容器的60%，这样可以更好地适应小屏幕设备。这种方法的优点是可以为不同设备提供不同的样式和尺寸，提高用户体验。
总结来说，以上三种方法都可以实现图片自适应的效果，开发者可以根据实际需求选择相应的方法。除此之外，还有其他实现方法，如Flexbox等。在实际开发中，需要根据具体场景选择合适的方案来满足需求。