最简可靠解法是img { max-width: 100%; height: auto; }，需父容器有明确宽度（如width: 100%或具体像素值），确保图片等比缩放不失真；漏掉height: auto或父容器无宽约束会导致拉伸、溢出或塌陷。
img { max-width: 100%; height: auto; } 是最简可靠解法
只要父容器有明确宽度（比如 width: 100% 或具体像素值），这组样式就能让图片随容器缩放且严格保持原始宽高比。浏览器会把 height: auto 解释为“按原始比例推算高度”，不是固定值也不是继承值。
常见错误是只写 width: 100%，漏掉 height: auto——这时浏览器可能沿用图片原始 height 属性或默认行为，导致拉伸变形。
- 必须确保父元素不是
display: flex或display: grid且未设min-width: 0，否则max-width: 100%在小屏下会被忽略 - 如果图片是行内元素，建议加
display: block消除底部默认空白 - 避免在
<img alt="HTML怎么保持图片自适应缩放时的长宽比" >标签上同时写width和height属性（如width="400" style="max-width:90%"），它们会覆盖 CSS 的max-width行为
Flex/Grid 容器里图片撑开布局？加 min-width: 0 到容器项
在 display: flex 或 display: grid 的父容器中，<img alt="HTML怎么保持图片自适应缩放时的长宽比" > 默认有 min-width: auto，它会阻止图片收缩，哪怕你写了 max-width: 100%。这不是图片的问题，而是 Flex/Grid 子项的默认约束。
解决方法不是改图片本身，而是给图片的直接父容器项（即 flex item 或 grid item）加 min-width: 0：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
div.card {
min-width: 0; /* 关键：允许子项中的 img 收缩 */
}
div.card img {
max-width: 100%;
height: auto;
}- 别试图靠
flex-shrink: 1强制压缩图片，对替换元素效果不稳定 - 如果需垂直居中，可加
align-self: center到<img alt="HTML怎么保持图片自适应缩放时的长宽比" >上 - 若容器本身也要维持比例（如 16:9），优先用
aspect-ratio: 16/9，比旧式padding-top更直观
固定尺寸容器里填满又不失真？object-fit + 显式宽高
当你已经给容器设了固定尺寸（比如头像框 width: 80px; height: 80px），又想让任意比例的图片完整显示或填满区域，object-fit 才是正解——但前提是容器必须有明确宽高，否则它完全不生效。
object-fit: contain 等比缩放并留白，适合产品图；object-fit: cover 等比缩放后裁剪，适合封面、头像。
- 必须配合
display: block使用，否则部分浏览器下不触发 - 老版 iOS Safari 需加前缀：
-webkit-object-fit: cover - IE 不支持，fallback 方案只能用
background-image+background-size，但会丢失alt文本和 SEO 价值 - 不要对普通流式图片滥用
object-fit，它不替代max-width: 100%，场景完全不同
响应式图片发虚或加载太慢？srcset + sizes 必须配对
CSS 缩放只是控制“怎么显示”，而 srcset 和 sizes 控制“加载哪张图”。只做前者，高清屏上图片模糊，小屏却加载 2MB 大图——用户感知就是卡顿+糊。
srcset 列的是源图固有宽度（单位 w），sizes 必须和 CSS 中该图片容器的**实际显示宽度逻辑一致**，否则浏览器选错源。
- 示例：
<img src="photo.jpg" srcset="photo-480.jpg 480w, photo-800.jpg 800w" sizes="(max-width: 768px) 100vw, 50vw" alt="HTML怎么保持图片自适应缩放时的长宽比" > - 如果 CSS 中图片容器在桌面端占视口一半宽，
sizes就得写50vw，不能瞎填 - 漏掉
sizes时浏览器会回退到100vw，大概率加载过大资源
真正卡住人的从来不是单点写法，而是 max-width 依赖父宽、flex 项需要 min-width: 0、object-fit 要求显式尺寸、srcset 必须匹配真实布局逻辑——这些条件缺一不可，且容易被当成“个别异常”忽略。
