如何不使用picture标签，通过CSS实现移动端图片自适应缩放？

当然可以，以下两种纯CSS方案能实现和你现有<picture>标签相同的响应式图片切换效果：

方案一：使用背景图片（推荐，兼容性好） #

把图片作为容器的背景图，通过媒体查询在不同屏幕宽度下切换背景图片，同时保证容器自适应显示：

HTML 代码 #

<div id="decorativeimage" role="img" aria-label="a cartoon image of a web developer"></div>

这里用role="img"和aria-label替代原<img>的alt属性，保证可访问性。

CSS 代码 #

#decorativeimage {
  width: 100%;
  height: auto;
  min-height: 200px; /* 根据实际需求设置最小高度 */
  background-size: cover;
  background-position: center;
  background-image: url('images/DesktopMode.png'); /* 默认加载桌面端图片 */
}

/* 平板尺寸（≤768px） */
@media (max-width: 768px) {
  #decorativeimage {
    background-image: url('images/DesktopTabletMode.jpg');
  }
}

/* 手机尺寸（≤320px） */
@media (max-width: 320px) {
  #decorativeimage {
    background-image: url('images/DesktopPhonemode.png');
  }
}

方案二：直接修改<img>的content属性 #

如果想保留<img>标签，可以利用CSS的content属性切换图片源，不过这种方式兼容性略低于背景图方案（现代浏览器均支持）：

HTML 代码 #

<img id="decorativeimage" src="images/DesktopMode.png" alt="a cartoon image of a web developer">

CSS 代码 #

/* 默认显示桌面端图片 */
#decorativeimage {
  width: 100%;
  height: auto;
}

/* 平板尺寸（≤768px） */
@media (max-width: 768px) {
  #decorativeimage {
    content: url('images/DesktopTabletMode.jpg');
  }
}

/* 手机尺寸（≤320px） */
@media (max-width: 320px) {
  #decorativeimage {
    content: url('images/DesktopPhonemode.png');
  }
}

注意：两种方案都是根据屏幕宽度加载对应图片，和<picture>标签的逻辑一致，但如果需要根据设备像素比（DPR）加载不同分辨率图片，纯CSS方案无法实现，仍需使用srcset或<picture>。

内容的提问来源于stack exchange，提问作者Amanpreet Kaur