object-position比text-align更适合图片对齐，因为text-align对<img>无效（除非display: inline-block且有文本流），而object-position专为替换元素设计，配合object-fit可精确控制内容在容器内的锚点位置。
object-position 为什么比 text-align 更适合图片对齐
因为 text-align 对 <img> 无效（除非设为 display: inline-block 且父容器有文本流上下文），而 object-position 是专为替换元素（如 <img>、<video>）设计的定位属性，配合 object-fit 才能真正控制「内容在容器框内的锚点位置」。
常见错误现象：margin: auto 居中失效、text-align: center 没反应、用 position: absolute + transform 过度复杂化。
-
object-position值是相对于容器左上角的偏移，格式为object-position: x y，支持像素、百分比、关键词（如center、top left） - 必须和
object-fit: cover或contain配合使用才有意义；若object-fit: fill，则object-position不生效 - 兼容性：Chrome 31+、Firefox 36+、Safari 9.1+、Edge 16+；IE 完全不支持，需降级方案
怎么让图片右下角始终对齐容器右下角
适用场景：头像裁剪、图标背景图定位、响应式 banner 中固定角落的装饰元素。
关键不是靠 right: 0; bottom: 0，而是用 object-position: right bottom 配合 object-fit: cover —— 这样无论图片原始宽高比如何，它的右下像素点都会贴住容器右下角。
立即学习“前端免费学习笔记（深入）”；
- 等价写法：
object-position: 100% 100%，但关键词更易读、语义更清晰 - 如果容器尺寸动态变化（比如 flex item），
object-position会自动重算，无需 JS 干预 - 注意：若图片本身比容器小且用
object-fit: contain，object-position仍有效，但表现是「缩放后的内容整体偏移」
object-position 和 background-position 的区别在哪
两者都控制「内容相对容器的位置」，但作用对象完全不同：background-position 控制的是背景图层，object-position 控制的是替换元素自身的内容区域。
典型误用：想用 background-image 实现图片居右，却忘了背景图无法响应 srcset 或懒加载，也不支持原生 decoding 和 fetchpriority。
-
<img>支持语义化、可访问性（alt）、SEO、现代加载策略；background-image只是装饰 -
object-position单位解析更一致（百分比基于容器尺寸，非图片尺寸）；background-position百分比基于图片尺寸，容易混淆 - 性能影响：CSS 背景图不会触发浏览器的图像解码优化路径，而
<img>会
移动端 Safari 下 object-position 偶尔失效怎么办
真实问题：iOS 15.4–16.2 中，当 <img> 在 display: flex 容器里且未显式设置 width/height 时，object-position 可能被忽略。
这不是 bug，是 Safari 对「无尺寸替换元素在弹性布局中如何计算基线」的特殊处理。解决方式非常具体：
- 给
<img>显式设置width和height（哪怕用width: 100%; height: 100%） - 或改用
min-width: 0; min-height: 0破坏 flex 项的默认最小尺寸约束 - 避免在
<picture>外层套多层未设尺寸的<div>，Safari 会逐层丢失尺寸上下文
这个细节在开发调试时很难联想，但一旦遇到，加一行 min-width: 0 就能立刻验证是否命中。
