我来帮你搞定这个图片适配需求！你要的效果完全可以用纯CSS实现，不需要复杂的脚本，核心就是利用max-width属性来控制图片的缩放逻辑。

核心实现思路 #

• 给图片设置max-width: 100%：当图片自身宽度大于容器（这里对应屏幕宽度375px）时，自动缩小到容器宽度；
• 搭配width: auto：确保图片自身宽度小于容器时，保持原尺寸显示，不会被强制拉伸；
• 加上height: auto：保证图片缩放时维持原有宽高比，避免变形。

完整代码示例 #

CSS部分

/* 容器可以保留你原来的高度控制，也可以根据需求调整 */
.img-body {
  height: 350px;
  width: auto;
  /* 可选：如果需要小图片居中显示，可以加这个 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 图片适配核心样式 */
.img-body img {
  max-width: 100%;
  width: auto;
  height: auto;
}

HTML部分

<div class="img-body">
  <img src="banner1629290852.jpg" alt="图片描述">
</div>
<!-- 另一张264px的图片直接复用这个结构即可 -->
<div class="img-body">
  <img src="your-small-image.jpg" alt="小图片描述">
</div>

效果说明 #

• 对于515px的图片：因为它的宽度大于屏幕375px，max-width: 100%会让它自动缩放到375px，同时height: auto保证比例不变；
• 对于264px的图片：它的宽度小于屏幕375px，width: auto会让它保持原有的264px宽度，不会被拉伸到屏幕宽度。

如果你的.img-body容器不需要固定高度，也可以直接去掉这个类，只给图片加核心适配样式就行，灵活性很高。

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