应使用 aspect-ratio 配合 max-width 控制图片容器比例，配合 object-fit 调整内容填充方式，并通过 srcset/sizes 适配高 DPR 屏幕，旧版 Safari 需 padding-top 或 background-image 回退。
图片容器在移动端被拉伸变形
直接给 <img alt="CSS移动端如何实现响应式图片容器_设置max-width 100%限制宽度" > 或其父容器设 max-width: 100% 不够——它只管宽度，不保高宽比。常见现象是：小屏上图片被压扁或撑开，尤其用 width: 100% + height: auto 时，若原始图宽高比和容器不一致，依然会错位。
关键不是“限制宽度”，而是“让容器自己适应图片，同时约束上限”。推荐用 aspect-ratio 配合 max-width：
img {
width: 100%;
height: auto;
max-width: 100%;
}
.img-container {
width: 100%;
aspect-ratio: 16 / 9; /* 按实际图比例设 */
max-width: 100%;
}-
aspect-ratio是现代方案核心，强制容器维持比例，再由子元素img自然填充 - 不支持
aspect-ratio的旧版 Safari（iOS ≤ 15.4）需 fallback：用 padding-top 百分比技巧，但仅限块级容器且子元素需绝对定位 - 别对
img同时设width和height具体值，否则会覆盖max-width: 100%
父容器设了 max-width 100% 但图片还是溢出
典型原因是父容器本身没限制宽度来源，比如外层有 display: flex 或 position: absolute，导致宽度计算脱离视口上下文。此时 max-width: 100% 实际参考的是父容器的“无约束宽度”，而非屏幕宽度。
检查并修正宽度链路：
立即学习“前端免费学习笔记（深入）”；
- 确保图片最近的、有明确宽度约束的祖先元素设置了
width: 100%或max-width: 100% - 避免在图片路径中出现
flex容器未设flex-shrink: 0，它会让图片强行撑宽 - 用浏览器 DevTools 查看 computed width，确认
max-width: 100%的百分比基准到底是哪个元素的 width - 更稳妥的做法：直接给图片加
max-width: 100vw（注意是vw，不是%），跳过父级依赖
响应式图片需要适配不同 DPR 屏幕
max-width: 100% 只解决布局缩放，不解决像素密度问题。iPhone 等设备 DPR=2/3，一张 400px 宽的图在 retina 屏上会模糊。
必须配合 srcset 和 sizes：
<img
src="photo-400.jpg"
srcset="photo-400.jpg 400w,
photo-800.jpg 800w,
photo-1200.jpg 1200w"
sizes="(max-width: 480px) 100vw, 50vw"
alt="示例">-
sizes告诉浏览器“这张图在不同断点下会占多宽”，浏览器据此从srcset选最匹配的资源 - 别漏掉
src作为降级兜底，否则老浏览器直接不显示 - 如果用 CSS 背景图实现响应式容器，得改用
@media+background-image切换，srcset对 background 无效
使用 object-fit 控制图片在容器内的裁剪方式
即使容器宽高比固定、图片也响应缩放，仍可能因原图比例不匹配而留白或裁切不当。这时候 max-width: 100% 已经完成任务，真正要调的是内容对齐逻辑。
在 img 上加 object-fit：
-
object-fit: contain→ 保持比例、完整显示，四周可能留白 -
object-fit: cover→ 保持比例、填满容器，超出部分裁剪（常用封面图） -
object-fit: fill→ 拉伸填充，不保比例（一般不用） - 注意：必须配合
width和height明确设值（如height: 100%），否则object-fit不生效
复杂点在于，object-fit 在 iOS Safari 旧版本里支持不稳定，如果项目需兼容 iOS 12–14，得用 background-image + background-size 替代，或者加 JS 检测回退。
