使div大小适应背景图像

Question

我试图设置一个div的大小（宽度和高度）以匹配其背景图像的大小，但我无法使其工作。因为我正在处理响应式网站，所以背景图像大小必须以百分比表示。在较小的屏幕上，背景应该完全显示（宽度更小，但仍然成比例），并且具有图像的div应该跟随该大小。我尝试了各种background-size的值，如auto 100％、cover、contain等，但没有任何效果。这里有一个类似的问题：scale div to background image size，但它也没有解决我的问题。如果有人知道如何做到这一点，我会非常感激。编辑：我制作了一个fiddle来展示行为：http://jsfiddle.net/osv1v9re/5/，这一行是导致背景图像变得很小的原因。

background-size: auto 100%;

但是如果将其去除，则背景将填充适当的宽度，但不会填满高度。

- Berna

---

制作一个 Fiddle，这样我们就可以帮助您。 - Shadi Alnamrouti

@Heah 很遗憾，我无法更改 <img> 标签的背景图片。我知道这样做可以解决问题... - Berna

你不能将 div 的大小设置为百分比，并将 background-size设置为 contain 吗？ - Heah

@Heah 谢谢！那完全解决了问题。如果您将其作为答案放置，我会接受它。 - Berna

@Berna 谢谢，已完成 - Heah

Answer 1

标签无法适应背景图片的大小，您需要使用一个标签并选择div的height: auto或使用javascript。

// **** Problem ****

// Wrong html :
<div class="my_class"><div>

// with css :
.my_class {
    width: 100%;
    height: 100%;
    background-image: url(/images/my-image.jpg);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

//****  Solution ****

// use css:
.my_class {
    width: 100%;
    height: 100%;
    background-image: url(/images/my-image.jpg);
    background-size: contain;
}

- Heah

Answer 2

*{
    padding: 0;
    margin: 0;
}


div{
    width: 100%;
}
div figure{
    padding-top: 36.56%;  /* 702px/1920px = 0.3656 */
    display: block;
    background: url("https://st.fl.ru/images/landing/bg2.jpg") no-repeat center top;
    background-size: cover;  
}

<div>    
    <figure></figure>
</div>

- Dmitriy

Answer 3

你可以使用padding-bottom或padding-top来实现响应式高度，因为你不能在百分比的宽度中固定一个百分比的高度属性。

div{

 background-image: url(url);
 background-repeat: no-repeat;
 background-size: 100% 100%;
 background-position: center;

 margin: 0 auto;

 width: 100%;
 padding-bottom:  heightPicure / widthPicture + %; //do it manually or using scss rules

}

- Roger Causto