等效于内联图像的背景位置答案

【问题标题】：Equivalent of background-position for inline image等效于内联图像的背景位置
【发布时间】：2017-04-23 01:47:01
【问题描述】：

我无法使用背景图片，因为我在 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;
}

【问题讨论】：

布局/样式的目标是什么？我有点不清楚。
你能给我们一个演示吗？我插入了一张图片，这两个图片在我看来都一样codepen.io/anon/pen/BRzyZj

标签： html css

【解决方案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%

.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">

【讨论】：

【解决方案2】：

object-fit 还可以通过object-position从坐标“剪辑”图像

它会在这里：object-position: 50% 50%; 或 object-position: center center;

见https://developer.mozilla.org/en-US/docs/Web/CSS/object-position

【讨论】：