图片自适应需用max-width: 100%; height: auto;确保宽度随容器变化、高度按原始比例缩放，避免拉伸变形；须移除内联width/height属性，配合display: block与margin: 0 auto或Flex布局实现居中；高清屏需srcset提供多倍图源，禁用已废弃的align属性。
图片在不同设备上撑满宽度但不拉伸变形
直接给 <img> 加 width: 100% 很容易导致图片被横向拉宽、比例错乱。真正要的是“宽度随容器变，高度按原始比例缩放”。核心是用 CSS 控制，而不是只靠 HTML 属性。
- 必须移除
width和height这类内联属性（它们会锁定尺寸，破坏响应式） - 给图片加
max-width: 100%+height: auto—— 这是最小可行组合 - 确保父容器有明确宽度（比如
<div>没设width时默认是 100% 视口宽，没问题；但如果父级被设成display: inline或浮动后没清除，宽度可能塌陷）
需要居中且保持比例时怎么写
单纯自适应还不够，很多场景下图片还得水平居中、上下留白合理。这时候不能只依赖 text-align: center（对块级元素无效），也不能靠 margin: 0 auto（它只对块级且有明确宽度的元素生效）。
- 把
<img>设为块级：display: block，再配margin: 0 auto - 或者用 Flex 布局：父容器加
display: flex; justify-content: center; align-items: center; - 避免用
align="center"—— 这个 HTML 属性已废弃，且在现代 CSS 下常失效
遇到高清屏（Retina）图片模糊怎么办
自适应后图片在高 DPI 屏幕上容易发虚，是因为浏览器用的是物理像素少的图源，却渲染到更多像素点上。这不是 CSS 能解决的，得换图源策略。
- 优先用
<picture>+<source>提供多倍图：srcset配2x描述符 - 简单场景可只升级
<img>的srcset属性，例如：<img src="pic.jpg" srcset="pic@2x.jpg 2x"> - 别指望
background-image+background-size: contain替代<img>—— 语义丢失、SEO 不友好、无法懒加载
移动端图文混排时图片突然溢出容器
常见于文章页里文字环绕图片（float: left），一加响应式就崩：小屏下图片宽度超了，文字还卡在右边，整体布局错位。
立即学习“前端免费学习笔记（深入）”；
- 放弃
float，改用display: flow-root清除浮动，或直接用 CSS Grid / Flex 布局重构图文关系 - 给浮动图片加
max-width: 100%同时，必须限制其最大宽度不超过父容器（比如加width: calc(100% - 1rem)预留文字边距） - 注意
object-fit: cover类方案——它裁剪图片而非缩放，适合封面图，但会丢内容，不适合信息图或证件照
真正难的不是让图片变小，而是让它在各种嵌套层级、各种 CSS 上下文里都守规矩。很多时候问题不出在 <img> 本身，而在它外面三层的 <div> 忘了设 box-sizing: border-box，或者某个重置样式悄悄加了 overflow: hidden。调的时候先查 computed style，别一上来就改图片样式。
