使用object-fit:cover将图像放入div

Question

我有一个div，里面有一张object-fit:cover的图片，正好适合我想要的样子，但我不能把文本放在上面。如果我把它作为div bakcground放进去，它的大小就不一样了。有没有办法把它作为背景放在div中，但仍然使用object-fit:cover。非常感谢

我正在使用以下内容：

​

.main {
      -webkit-filter: blur(0.2px);
      -moz-filter: blur(0.2px);
      -o-filter: blur(0.2px);
      -ms-filter: blur(0.2px);
      filter: blur(0.2px);
      border:0;
      padding:0;
        width:100%;
        height:560px;
        object-fit:cover;
    }

<div class="container-fluid main" style="margin-top: 0px;">
    <img src="https://images.pexels.com/photos/1213997/pexels-photo-1213997.jpeg" class="main" alt="mainbg" width="400" height="320">
    <div class="main-text">text here</div>
    </div>
    
    </div>

​

Answer 1

您可以将图像设置为背景图像。结合其他规则，你会得到你想要的东西。

  background-image: url(https://images.pexels.com/photos/1213997/pexels-photo-1213997.jpeg);
  background-size: cover;
  background-repeat: no-repeat;

希望这能帮助:>

​

.main {
  -webkit-filter: blur(0.2px);
  -moz-filter: blur(0.2px);
  -o-filter: blur(0.2px);
  -ms-filter: blur(0.2px);
  filter: blur(0.2px);
  border: 0;
  padding: 0;
  width: 100%;
  height: 560px;
  background-image: url(https://images.pexels.com/photos/1213997/pexels-photo-1213997.jpeg);
  background-size: cover;
  background-repeat: no-repeat;
}

.main-text {
  color: white;
}

<div class="container-fluid main" style="margin-top: 0px;">
  <div class="main-text">text here</div>
</div>

​

Answer 2

​

.main {
  -webkit-filter: blur(0.2px);
  -moz-filter: blur(0.2px);
  -o-filter: blur(0.2px);
  -ms-filter: blur(0.2px);
  filter: blur(0.2px);
  border:0;
  padding:0;
    width:100%;
    height:560px;
    object-fit:cover;
}
.main-text{
position:absolute;
top:50px;
left:150px;}

With the HTML :

<div class="container-fluid main" style="margin-top: 0px;">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRL9rsCJmYG8L6mb5mN_geyDWtUNhKw0AIG6lJ3p7YGg7SxyHWb" class="main" alt="mainbg" width="400" height="320">
<div class="main-text">text here text heretext heretext here</div>
</div>

</div>

​

Answer 3

我没有更改object-fit属性。我刚刚更改了.main-text的位置，使其位于图像的上方。这是你所期望的吗？

​

.main {
      -webkit-filter: blur(0.2px);
      -moz-filter: blur(0.2px);
      -o-filter: blur(0.2px);
      -ms-filter: blur(0.2px);
      filter: blur(0.2px);
      border:0;
      padding:0;
        width:100%;
        height:560px;
        object-fit:cover;
    }
.main-text{
position:absolute;
top:50%;
left:50%;
color:white;
}

<div class="container-fluid main" style="margin-top: 0px;">
    <img src="https://images.pexels.com/photos/1213997/pexels-photo-1213997.jpeg" class="main" alt="mainbg" width="400" height="320">
    <div class="main-text">text here</div>
    </div>
    
    </div>

​