如何仅用单张图片实现符合指定规则的响应式缩放？

当然可以！既然640px版本只是320px图片的手动放大版，完全没必要额外维护这张冗余的图片文件，我们可以通过两种简单的方式实现相同的响应式显示效果：

方式1：优化现有srcset代码 #

只保留320px的原图，调整sizes规则让浏览器自动缩放图片：

<!-- 带有30px水平内边距的容器 -->
<div style="padding: 0 30px;">
  <img 
    srcset="TestImage320.png 320w" 
    sizes="(max-width: 669px) 320px, 640px" 
    src="TestImage320.png"
    alt="你的图片描述文本"
  >
</div>

原理说明： #

• 当屏幕宽度≥670px时，sizes属性告诉浏览器这张图片需要以640px的宽度显示，而srcset中只有320w的资源，浏览器会加载这张320px的原图，自动放大到640px显示——和你手动放大图片再上传的效果完全一致。
• 当屏幕宽度≤669px时，图片会以320px的原始尺寸显示，保证清晰性。

方式2：用CSS媒体查询直接控制显示尺寸 #

这种方式更简洁，完全不需要srcset和sizes，直接通过CSS控制图片的响应式宽度：

/* 针对容器内的图片设置基础样式 */
.container img {
  width: 100%;
  max-width: 640px;
}

/* 小屏幕下限制图片最大宽度为320px */
@media (max-width: 669px) {
  .container img {
    max-width: 320px;
  }
}

对应的HTML代码可以简化为：

<div class="container" style="padding: 0 30px;">
  <img src="TestImage320.png" alt="你的图片描述文本">
</div>

优点： #

• 代码更简洁易维护，不需要理解srcset的复杂规则。
• 始终只加载一张图片，减少HTTP请求和存储空间占用。

注意事项： #

浏览器放大图片可能会有轻微的画质损失，但既然你之前是手动放大图片使用，两种方式的画质差异几乎可以忽略不计，完全可以满足需求。

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