图片响应式（至少3种）

1. 使用百分比宽度

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

2. 使用媒体查询

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

@media (max-width: 768px) {
  img {
    width: 80%;
  }
}

@media (max-width: 480px) {
  img {
    width: 100%;
  }
}

3. 使用 srcset 和 sizes 属性

<img 
  src="small.jpg" 
  srcset="medium.jpg 768w, large.jpg 1200w" 
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
  alt="响应式图片"
>

4. 使用 picture 元素

<picture>
  <source media="(max-width: 768px)" srcset="small.jpg">
  <source media="(max-width: 1200px)" srcset="medium.jpg">
  <img src="large.jpg" alt="响应式图片">
</picture>