内嵌图像的背景位置等价物

Question

我不能使用背景图片，因为我在 CSS 中使用了 Django 变量。

我看着这些 图像位置相当于背景位置和 CSS 背景位置 50% 50% 不起作用（这里的建议答案使用background-position，我只想使用<img>标签）。

我想将它复制到一个<img>标签中。一切看起来都不错，除了background-position: 50% 50%。它的等价物是什么？

.main-header {
  min-height: 40%; 
  background: url('../img/parallax11.jpeg') no-repeat center;
  background-size: cover;
  text-align: center;
  background-position: 50% 50%;
}

到目前为止，这已经奏效：

.cover-img {
  display: flex;
  min-height: 30%;
  overflow: hidden;
  height:30vh;
  width: 100vw;
  object-fit: cover;
}

Answer 1

相当于background-size: cover;：

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

相当于background-position: 50% 50%;：

object-position: 50% 50%;

请参阅MDN上的规范。

这 object-position属性确定被替换元素在其框内的对齐方式。

初始值 50% 50%

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

object-position: 50% 50%;