直接用 width、max-width 和 height: auto 能安全控制图片尺寸，不拉伸、不溢出、适配容器；仅写 width: 100% 不设 height: auto 会导致比例丢失、截断或布局抖动，因 img 默认不自动推算高度。

直接用 width、max-width 和 height: auto 就能安全控制尺寸，不拉伸、不溢出、适配各种容器。

为什么不能只写 width: 100% 而不设 height

因为默认情况下 img 是内联元素，且浏览器不会自动按比例推算高度——除非你显式告诉它：height: auto。否则可能出现以下情况：

• 省略 height 时，若父容器没设高，width: 100% 会生效，但图片可能被截断或撑开布局
• 写了 width: 100%; height: 100%，图片必然变形（除非原图刚好匹配容器比例）
• 仅用 max-width: 100% 而不配 height: auto，在某些旧版 Safari 中仍可能失真

max-width: 100% 和 width: 100% 的实际差别

两者都常用，但行为不同，选错会导致响应失效或布局跳动：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• width: 100%：强制占满父容器宽度，哪怕原图只有 50px 宽，也会被横向拉伸
• max-width: 100%：只在图片原始宽度 > 父容器时才缩放，小图保持原尺寸，更安全
• 必须搭配 height: auto，否则比例丢失；单独写 max-width: 100% 不足以防变形
• 如果父容器本身没有明确宽度（比如未设 width 或 max-width 的 div），max-width: 100% 实际无效

如何让图片严格填满固定尺寸容器而不变形

当容器宽高已知（如头像框、卡片图区），用 object-fit 比硬调 width/height 更可靠：

• 先给 img 设固定宽高，例如 style="width: 200px; height: 150px;"
• 再加 object-fit: cover; —— 等比缩放并裁剪边缘，适合封面类图片
• 改用 object-fit: contain; —— 完整显示，留白，适合 Logo 或图标
• object-fit: fill; 会拉伸，慎用；且 IE 完全不支持，需确认兼容范围
• 注意：object-fit 不改变图片文件大小，只影响渲染，所以仍要配合 srcset 控制资源加载

容易被忽略的布局干扰点

即使 CSS 写对了，图片仍可能错位或撑开容器，常见原因有：

• img 默认是 vertical-align: baseline，下方会留出几像素空白，加 display: block 或 vertical-align: top 消除
• 父容器用了 flex 或 grid，但没设 align-items: center，导致图片贴顶/贴底，看起来“偏了”
• 图片加载前，浏览器无法预估尺寸，造成布局抖动（CLS），解决方法是在 img 上同时声明 width 和 height HTML 属性（即使后面用 CSS 覆盖）
• 使用 background-image 替代 img 标签时，background-size 行为与 object-fit 类似，但语义丢失、SEO 友好性下降，别为了省事乱换

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！