如何实现图片在容器内居中且不变形_运用CSS object-fit contain

object-fit: contain 不生效的主因是容器无宽高约束、图片未设 width 和 height、或 flex/grid 中布局塌陷；必须同时设置父容器尺寸、img 的 width: 100% 与 height: 100%、object-position: center 才能确保等比缩放并居中显示。

直接给 img 加 object-fit: contain 不起作用，90% 是因为容器没设宽高、图片自身尺寸没约束，或父容器布局塌陷。

为什么 object-fit: contain 看起来“没生效”

常见错误现象：图片还是被拉伸、留白出现在容器外侧、高度忽大忽小、在 flex/grid 里顶着顶部对齐。

• 父容器没有明确的 width 和 height（或 aspect-ratio），object-fit 就失去参照系
• img 只写了 width: 100% 没写 height: 100%，浏览器按原始尺寸渲染，contain 无从缩放
• 父容器是 display: inline 或 float 未清除，导致尺寸坍缩为 height: auto
• 在 flex 容器中没设 align-items: center，图片默认顶对齐，留白全堆在下方

必须写的三行 CSS 才能真正居中显示完整图片

这不是“可选”，而是 contain 正常工作的最小前提：

• 父容器设置固定宽高或 aspect-ratio（如 aspect-ratio: 4 / 3）
• img 必须同时设 width: 100% 和 height: 100%（不能只写一个）
• 显式加 object-position: center（虽然默认是 center，但老 Safari 或某些 flex 场景下会退化）

示例：

立即学习“前端免费学习笔记（深入）”；

<div style="width: 300px; height: 200px;">  <img src="product.jpg" style="width: 100%; height: 100%; object-fit: contain; object-position: center;"></div>

contain 下 object-position 还有用吗？

有用，但效果不是“裁剪”，而是“定位”。object-fit: contain 本身不裁剪，所以 object-position 只控制图片在留白区域中的对齐方式：

• object-position: center → 图片水平垂直居中（最常用）
• object-position: left top → 图片贴左上角，留白全在右下
• object-position: 20% 30% → 图片的 (20%, 30%) 点对齐容器中心，适合强调局部

注意：object-position 在 contain 下不会触发裁剪；想裁剪必须用 cover。

和 background-image + background-size: contain 的关键区别

别为了图省事换成背景图——语义、可访问性、懒加载、alt 文本全丢了：

• <img> 支持 loading="lazy"、decoding="async"、SEO alt 描述
• background-image 无法被屏幕阅读器识别，也不参与文档流
• 如果需要响应式占位（比如加载中灰块），<img> 配合 aspect-ratio 更可控

复杂点在于：你得同时管住容器尺寸、图片尺寸、父容器布局模式。漏掉任何一环，contain 就只是个摆设。