对象拟合：封面和对象位置：50％50％不将图像置于容器中间

Question

我有一个容器和里面的图像，如下所示：

.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将图像置于容器内：封面和物体位置：50％50％;因此，在较大的屏幕尺寸下，它总是覆盖容器，当容器较小时，它会将自己定位在容器的中心。

我注意到在我的例子中，img对象位置不响应％值，只是像素值。

编辑：我真的希望有人向我解释我的例子中对象位置的行为，即为什么使用百分比对财产没有影响。

Answer 1

您只是在img样式上缺少height: 100%;

Answer 2

将heigh:100%和width:100%放入图片标签