最可靠方案是max-width: 100%; height: auto;，需搭配min-width: 0（Flex容器中）、display: block（消除底部空白），并确保父容器有明确宽度；object-fit仅在容器尺寸明确时生效。
图片比例失调不是 CSS 写错了，而是你没告诉浏览器“这张图原本多宽多高”，或者给了它互相矛盾的指令。
为什么 max-width: 100% 单独用会变形
只写 max-width: 100%，浏览器会缩宽度，但高度仍按原始像素值或行内默认行为计算——结果就是被压扁或拉长。常见于 Flex 容器里的卡片图、文章插图在移动端突然脸变宽。
- 必须搭配
height: auto，让浏览器读取图片 intrinsic 尺寸（来自 HTMLwidth/height属性、EXIF 或加载后解析）并等比重算高度 - 如果父容器是 Flex 项，默认
min-width: auto可能阻止收缩，需额外加min-width: 0 -
display: block要顺手加上，否则<img>作为行内元素底部会留 3–4px 空白，影响布局对齐
object-fit 不生效？先检查容器尺寸
object-fit 不是万能缩放开关，它只在 <img> 有明确宽高约束时才起作用。写 object-fit: cover 却没效果，大概率是因为没给盒子定尺寸。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必须配合显式宽高：比如
width: 100%; height: 200px，或父容器设aspect-ratio: 16 / 9 - 别同时写
max-width: 100%和width: 100%，二者语义冲突，后者可能被忽略或导致意外裁剪 - Safari ≤15.2 不支持
aspect-ratio，降级要用padding-top: 56.25%+position: absolute填充，且记得box-sizing: border-box
srcset 不配 sizes，高清屏照样模糊
只用 srcset 列一堆图，但不告诉浏览器“在不同视口下这张图会占多宽”，浏览器就只能猜——常猜成 100vw，结果在窄屏也下大图再缩放，既慢又糊。
立即学习“前端免费学习笔记（深入）”；
-
sizes="(max-width: 768px) 100vw, 50vw"才是关键，它定义了图片在各断点下的渲染宽度 - 现代格式如
.webp或.avif必须用<picture>包裹，srcset自身不支持格式切换 - CMS 导出图、微信下载图常被抹掉 EXIF 宽高信息，导致
height: auto失效——用开发者工具 Network 面板看响应头里的Content-Length和原始尺寸验证
最易被忽略的是：图片文件本身损坏了 intrinsic 尺寸信息。哪怕 CSS 全对，一张被 tinypng 早期版本压缩过、EXIF 被清空的图，在 Safari 或旧 Android 浏览器里依然会塌陷或错位。别急着改样式，先查图源。
