实现响应式图片的方式：

1. 利用 max-width 属性

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

2. 利用媒体查询

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

@media only screen and (min-width: 768px) {
  img {
    max-width: 50%;
  }
}

@media only screen and (min-width: 1200px) {
  img {
    max-width: 33.33%;
  }
}

3. 利用 Flex 或 Grid 布局

<style>
  .flex-container {
    display: flex;
  }

  img {
    width: 100%;
    height: auto;
  }
</style>
<div class="flex-container">
  <img src="image.jpg" alt="示例图片" />
</div>

4. 利用 img 的 srcset 和 sizes 属性
   srcset 提供多种图片规格，sizes 让浏览器根据特定宽度选择合适图片

<img
  src="正常大小图片.jpg"
  srcset="小图片.jpg 480w, 正常大小图片.jpg 800w, 大图片.jpg 1200w"
  sizes="(max-width: 480px) 480px, (max-width: 800px) 800px, 1200px"
  alt="示例图片"
/>

5. 使用 Picture 元素， media 查询屏幕宽度， srcset 指定图片

<picture>
  <source media="(max-width: 480px)" srcset="小图片.jpg" />
  <source media="(max-width: 768px)" srcset="正常大小图片.jpg" />
  <source media="(max-width: 1280px)" srcset="大图片.jpg" />
  <img src="正常大小图片.jpg" alt="示例图片" />
</picture>