最简可靠的响应式图片方案是为img元素设置max-width: 100%和height: auto，确保等比缩放不拉伸；需约束父容器宽度以防小图放大模糊，并通过srcset提供多倍图源适配高清屏。
直接用 max-width: 100% 加 height: auto 就能可靠实现手机网页上的等比缩放，不需要 JavaScript，也不依赖父容器是否已知宽高。
基础写法：最简可靠的响应式图片
给
-
max-width: 100%—— 图片宽度最多占满父容器，不会溢出 -
height: auto—— 高度由浏览器按原始宽高比自动计算，不拉伸不变形
⚠️ 注意移除任何显式的 height、min-height 或固定像素高度，否则会覆盖 auto 行为。
父容器要有宽度约束
如果父容器没设宽度（比如 div 默认是 block 全宽），max-width: 100% 会让图片撑到视口全宽，小图会被强行放大变模糊。
推荐做法：
- 给父容器加
max-width: 100%或width: 100% - 用 Flex/Grid 布局时，确保容器有明确的尺寸上下文（如
flex: 1或grid-template-columns） - 避免让图片直接挂在
下且无包裹容器
高清屏不模糊？补上 srcset
等比缩放本身不提升清晰度。在 iPhone 或安卓高分屏上发虚，是因为只提供了一张普通分辨率图。
用 srcset 提供多倍图源：
- 搭配
sizes更精准：sizes="(max-width: 768px) 100vw, 50vw"
浏览器会根据设备像素比和视口宽度自动选最合适的图源。
需要裁剪或居中显示？慎用 object-fit
object-fit: cover 或 contain 是在**容器尺寸固定**的前提下控制图片怎么“塞进去”，不是等比缩放本身。
适用场景：
-
cover：填满容器，可能裁边（适合封面图、头像） -
contain：完整显示，留白（适合产品图、示意图）
⚠️ 注意：object-fit 在 IE 中完全不支持；若需兼容旧浏览器，建议改用背景图 + padding-bottom 技巧或降级 JS 方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
