图片响应式需三步：①用max-width:100%和height:auto防溢出并保比例；②用object-fit/object-position控制裁剪与锚点；③用srcset/sizes适配高清屏。缺一即失效。
图片在不同屏幕下被拉伸变形？用 max-width: 100% 和 height: auto
这是最基础也最容易被忽略的一环：不加 max-width: 100%，图片就根本不会随容器缩放。浏览器默认按原始尺寸渲染，哪怕父容器只有 300px 宽，<img> 仍可能撑出横向滚动条。
关键不是“设个宽度”，而是用 max-width 防止溢出，再靠 height: auto 保持宽高比：
img {
max-width: 100%;
height: auto;
}- 只对
<img>元素生效；background-image不吃这套 -
width: 100%会强制铺满，破坏比例；max-width是上限，更安全 - 如果父容器没设宽（比如
div默认 100%），那图片最多占满父容器；但如果父容器本身没约束（如 flex 容器未设flex-shrink），它仍可能溢出
需要裁剪或居中显示内容？必须用 object-fit 配合 object-position
object-fit 不是给 div 用的，只作用于替换元素（<img>、<video>）。它解决的是“图片尺寸和容器不匹配时怎么填满”的问题，和 background-size 类似但语义更清晰。
常见组合：
立即学习“前端免费学习笔记（深入）”；
img {
width: 100%;
height: 200px; /* 必须固定高度才能看出效果 */
object-fit: cover; /* 裁剪并填满 */
object-position: center top; /* 指定裁剪锚点，默认 center center */
}-
object-fit: contain会完整显示整张图，留白；cover优先填满，可能裁边 - IE 完全不支持
object-fit，需要 fallback（比如用background-image+ 媒体查询） -
object-position接受left/center/right top/center/bottom或具体像素/百分比，适合突出人脸、logo 等关键区域
为什么 img 加了 max-width 还是不响应？检查父级是否“锁死”了尺寸
响应式失效往往不在图片本身，而在它的容器链。比如：
- 父
div写了width: 1200px—— 图片再怎么max-width: 100%也超不过这个数 - Flex 容器里没设
flex-shrink: 1，子项默认不压缩，max-width失效 - CSS Grid 中列轨道用了
fr或固定值，但图片所在格子没设min-width: 0，导致内容撑开网格线
简单验证法：临时加 outline: 1px solid red 到各级父元素，看哪一层实际宽度没变。
移动端高清屏显示模糊？srcset 和 sizes 才是关键
max-width 和 object-fit 只管布局，不管像素密度。iPhone 的 Retina 屏、安卓高端机，物理像素是 CSS 像素的 2–3 倍，只给一张 400px 宽的图，必然糊。
必须配合 HTML 层的响应式资源选择：
<img
src="photo-400.jpg"
srcset="photo-400.jpg 400w,
photo-800.jpg 800w,
photo-1200.jpg 1200w"
sizes="(max-width: 768px) 100vw, 50vw"
alt="示例">-
srcset提供多张图，sizes告诉浏览器“在什么条件下这张图大概占多宽” - 没有
sizes，浏览器默认按 100vw 算，可能选错资源 - 工具链如 Webpack、Vite 插件可自动生成
srcset，但得确认输出路径和width描述符是否匹配
真正麻烦的是三者要对齐：CSS 控制布局尺寸、HTML 提供适配资源、JS（如有）不能绕过 srcset 直接改 src。漏掉任何一环，高清屏就糊。
