html - 等效于内联图像的背景位置

Question

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

我看了这些 Image position equivalent to background position和 CSS background position 50% 50% does not work (此处建议的答案使用 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 上的规范.

The object-position property determines the alignment of the replaced element inside its box.

Initial value 50% 50%

.cover-inline-image,
.cover-background-image {
  width: 200px;
  height: 200px;
  margin-bottom: 10px;
}

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

.cover-background-image {
  background-image: url("//unsplash.it/400/300?image=0");
  background-size: cover;
  background-position: 50% 50%;
}

Inline image:<br>
<div class="cover-inline-image">
  <img src="//unsplash.it/400/300?image=0">
</div>

Background image:<br>
<div class="cover-background-image"></div>

How the image looks be default:<br>
<img src="//unsplash.it/400/300?image=0">