如何在不使用高度的情况下设置beckground图像的完整div

Question

我动态生成了第一个div，并放置了第二个div。

第一个div图像动态拍摄200X200。相同大小的图像，我想在第二个分区中通过css设置它。

但当我尝试设置它时，它并没有占据图像的全高200。如果我提到最小身高，并不是所有的决议都适用。我不想为媒体查询指定最小高度。

如何自动设置背景图像高度？

第一分区结构

<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-6">
<div class="product-thumb transition">
<div class="image"><a href="#"><img src="../image/cache/catalog/savouries/karasevu-200x200.jpg" alt="Karasevu" title="Karasevu" class="img-responsive"></a></div>
<div class="caption">
<h4><a href="#">Karasevu</a></h4>
<p class="price"> $0.00 </p>
</div>
<div class="button-group home-btn">
<button class="producthome-btn" type="button" onClick="cart.add('71');"><i class="fa fa-shopping-cart cart-icon"></i> <span class="">Add to Cart</span></button>
</div>
</div>
</div>

第二分区结构

<div class="more-link product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="a-more-link"> <a href="#">VIEW MORE</a> </div>
</div>

Answer 1

使用background-size属性。

.someClass {
background-image: url(someImage.jpg);
background-size: cover;
}

Answer 2

第一种方法使用background-size到100%

.classname {
background-image: url(img.png);
background-size: 100%;
}

第二种方法使用background-size覆盖

.classname {
background-image: url(img.png);
background-size: cover;
}

Answer 3

尝试使用背景大小：封面，您可以使用背景位置：中心将其居中

Answer 4

将身体元素设置为100%，如下所示：

body{
height: 100%;
}

然后使用inherit或将你的bg高度设置为100%，如下所示：

.yourParentDiv{
height: 100%;
// your other code here
}