Question

我正在设置div的大小（宽度和高度）以匹配它的背景图片大小，但我无法让它工作。背景图片大小必须是百分比，因为我正在处理响应式网站。在较小的屏幕上，背景应该完全显示（宽度较小，但仍然成比例），并且拥有图像的div应该遵循该尺寸。

我尝试了各种背景大小的值，例如自动100％，封面，包含等等，但没有做到这一点。这里有一个类似的问题：scale div to background image size但它也没有解决我的问题。

如果有人知道怎么做，我真的很感激。

修改我做了一个小提示来表明这种行为：http://jsfiddle.net/osv1v9re/5/ 这条线是使背景图像如此小的原因：

background-size: auto 100%;

但是如果删除了它，背景将填充适当的宽度，但不是高度。

Answer 1

标签无法适应背景图片大小，您需要使用标签并选择高度：自动为div或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;
}

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>

Answer 3

使用衬垫底部或衬垫顶部可以获得响应高度因为你无法在＆＃39;％＆＃39;中修复高度属性宽度为＆＃39;％＆＃39;。

＆＃13;

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

}

＆＃13;

Answer 4

如果您想使height与width成比例并设置background-image，则可以完成此工作。有一个不使用JavaScript的简单解决方案。只需将<svg>以特定比例添加到容器中即可。

您必须将图像尺寸用作viewBox <svg viewBox="0 0 960 628"></svg>

示例：

div{
  background-image:url('https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320_960_720.jpg');
  background-size:cover;
  background-position:50%;
  background-repeat:no-repeat;
}
svg{
  width:100%;
  display:block;
  visibility:hidden;
}


.demo-1{width:100%}
.demo-2{width:40%}

<div class="demo-1">
  <svg viewBox="0 0 960 628"></svg>
</div>

<hr>

<div class="demo-2">
  <svg viewBox="0 0 960 628"></svg>
</div>

适合背景图像的div大小

4 个答案: