CSS3如何实现响应式图片

在CSS3中，实现响应式图片主要依赖于max-width属性和height: auto。以下是实现响应式图片的步骤：

1. 为图片设置max-width属性： 将图片的最大宽度设置为100%，这样当浏览器窗口变小时，图片的宽度也会相应地缩小，以适应窗口大小。

   img {
     max-width: 100%;
   }
   

2. 设置height属性为auto： 当设置max-width为100%时，为了保持图片的原始宽高比，需要将高度设置为auto。

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

3. 使用<picture>元素（可选）： 如果你需要根据不同的屏幕尺寸或分辨率提供不同版本的图片，可以使用<picture>元素。<picture>元素允许你为不同的媒体查询提供不同的<source>元素，浏览器会根据当前条件选择合适的图片。

   <picture>
     <source media="(min-width: 768px)" srcset="large.jpg">
     <source media="(min-width: 480px)" srcset="medium.jpg">
     <img src="small.jpg" alt="Responsive image">
   </picture>
   

   在这个例子中，当浏览器窗口宽度大于等于768px时，会显示large.jpg；当宽度大于等于480px且小于768px时，会显示medium.jpg；否则，会显示small.jpg。

通过以上方法，你可以实现响应式图片，使其在不同设备和屏幕尺寸下都能正常显示。