Question

我无法使用背景图片，因为我正在将Django变量用于CSS。

我看着这些 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上的规范。

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

Answer 2

Guide也可以剪辑＆＃39;来自coordonates的图像来自object-fit

就在这里：object-position或object-position: 50% 50%;

请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/object-position

内联图像的背景位置的等效

2 个答案: