掌握HTML代码实用技巧轻松解决图片变形问题

图片变形的根本原因是未约束缩放比例，必须用max-width:100%+height:auto实现等比缩放，或固定容器尺寸后配合object-fit:cover/contain及object-position精准控制裁剪焦点。

图片变形不是代码写错了，而是你没告诉浏览器“按比例缩放”——直接设 width 和 height 两个固定值，等于强制拉伸，必然失真。

为什么只写 width: 100% 还是变形？

常见错觉：以为写了 width: 100% 就够了，结果在某些容器里图片还是被压扁。根本原因是没配 height: auto，浏览器默认会把 height 当作 auto，但一旦父容器高度塌陷（比如没设 min-height 或内容撑不开），img 实际渲染高度就不可靠。

1. 必须显式写 height: auto，否则 width: 100% 在 flex/grid 容器或浮动布局中可能失效
2. 如果父容器本身高度固定（如 height: 200px），height: auto 就没意义——此时只能用 object-fit 或背景图方案
3. 别信“写了 width 就自动等比”，HTML 属性 width="300" 和 CSS width: 300px 行为一致，都不保比例，除非另一个维度是 auto

object-fit 不生效？先查这三件事

object-fit 不是开关，它依赖明确的尺寸上下文。90% 的失效都卡在这几个硬性条件上：

1. 元素必须有确定的渲染尺寸：至少 width 和 height 中一个非 auto，且不能是 0（检查 computed style 中的 height 是否为 0）
2. display 必须是 block 或 inline-block；img 默认是 inline，容易因换行符产生间隙，加 display: block 最稳妥
3. IE11 及更早版本完全不支持 object-fit，降级方案只能用 background-image + background-size: cover，但会丢失 alt 和 SEO

cover 裁掉人脸？用 object-position 微调

object-fit: cover 默认从图片中心裁剪，但人像、LOGO、文字图的关键区域往往不在正中。光靠 cover 不够，必须配 object-position 控制焦点：

1. object-position: center top —— 保留头顶，适合头像、人像
2. object-position: bottom —— 保脚部，适合产品图、全身照
3. object-position: 20% 30% —— 百分比值对应图片坐标系，左上角是 0% 0%，右下角是 100% 100%
4. 注意：object-position 只在 object-fit 为 cover 或 contain 时起作用，fill 和 none 下无效

响应式场景下，background-size 比 object-fit 更可控？

当图片纯作装饰、无需右键保存、也不需 srcset 响应式加载时，background-image 确实更稳，尤其在 Safari 旧版本或复杂嵌套布局中：

1. background-size: cover 和 background-size: contain 行为稳定，不受 display 类型影响
2. 必须配合 background-position，否则裁剪点不可控；移动端竖屏常需媒体查询重设，比如桌面用 center，手机改用 top
3. background-attachment: fixed 在 iOS Safari 上极易闪动或错位，慎用；若要视差效果，优先用 transform: translateY() 模拟
4. 关键限制：无法设置 alt 文本，搜索引擎无法识别图片内容，资讯类、电商详情页务必避开

真正难的不是选哪个属性，而是判断“这张图到底要不要完整显示”——证件照必须用 contain，Banner 图优先 cover，而用户头像还得加 object-position 防切脸。所有方案都绕不开一个前提：容器得有可预期的高度来源。