如何在不使用高度的情况下设置背景图像完整 div答案

【问题标题】：How to set beckground image full div without using height如何在不使用高度的情况下设置背景图像完整 div
【发布时间】：2020-08-24 19:15:44
【问题描述】：

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

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

但是当我尝试设置它并且它没有占用图像的全高 200 时。如果我提到 min-height 它不适用于所有分辨率。我不想为媒体查询指定最小高度。

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

第一个 div 结构

<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结构

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

【问题讨论】：

标签： html css

【解决方案1】：

使用background-size 属性。

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

尝试使用 background-size:cover 你可以通过使用 background-position:center 来居中

【讨论】：

【解决方案4】：

像这样将你的 body 元素设置为 100%：

 body{
 height: 100%;
}

然后使用继承或将背景高度设置为 100%，如下所示：

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

【讨论】：