object-fit:cover与object-position:50%50%无法居中图片，求解析百分比失效原因

嘿，我来帮你拆解这个问题的核心逻辑——object-position不是真的对百分比无效，而是你的布局场景里根本没给它发挥作用的空间！

先复盘下你的代码逻辑：

.container { 
  height: auto; 
  width: 100vw; 
  position: relative; 
  overflow: hidden; 
}
img { 
  width: 100%; 
  min-width: 500px; 
  object-fit: cover; 
  object-position: 50% 50%; 
}

<div class="container"> 
  <img src="https://s.tmimgcdn.com/blog/wp-content/uploads/2016/04/1-9-2.jpg?x47994" alt=""> 
</div>

## 核心问题：你的布局没触发`object-fit`的裁剪逻辑
`object-position`生效的前提是：**图片的固有宽高比和它的“替换内容框”宽高比不一致**，此时`object-fit:cover`会对图片进行裁剪，`object-position`才能控制裁剪后显示区域的位置。但你的布局刚好避开了这个场景：
- 当屏幕宽度≥500px时：图片宽度=容器宽度（100vw），高度按自身比例自动缩放，容器`height:auto`会被图片高度完全撑开。此时图片刚好填满容器，`object-fit:cover`没有裁剪或拉伸的必要，`object-position`自然看不到效果。
- 当屏幕宽度<500px时：图片宽度固定为500px，高度按比例缩放，容器宽度<500px但高度等于图片高度。这时容器的`overflow:hidden`确实裁剪了图片左右超出的部分，但这是**容器的溢出裁剪**，不是`object-fit`的裁剪——图片在自己的500px宽的内容框里是完全适配的，没有被`object-fit`调整，所以`object-position`依然没机会生效。

## 如何让`object-position`百分比值正常工作？
你需要打破图片内容框和固有宽高比的匹配，给`object-fit`创造裁剪的场景，比如：
1. 给容器设置固定高度（和图片固有宽高比不一致）：
```css
.container {
  height: 400px; /* 固定高度，打破图片比例匹配 */
  width: 100vw;
  overflow: hidden;
}
img {
  width: 100%;
  height: 100%; /* 让图片内容框和容器尺寸一致 */
  object-fit: cover;
  object-position: 50% 50%; /* 此时百分比会生效，控制图片居中裁剪 */
}

2. 或者给图片设置非比例的固定宽高：

img {
  width: 100%;
  min-width: 500px;
  height: 300px; /* 固定高度，打破自身比例 */
  object-fit: cover;
  object-position: 50% 50%;
}

简单总结：object-position是调整图片在自身内容框里的显示位置，只有当图片被object-fit裁剪/拉伸时，这个定位效果才能被观察到。你的当前布局里，图片始终完美填满自身内容框，所以百分比值看起来“无效”。

内容的提问来源于stack exchange，提问作者jacobdo