CSS 使 div 大小适合背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30319743/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fit div size to background image
提问by Berna
I'm trying to set the size (both width and height) of a div to match it's background image size, but I can't get it working. The background image size has to be in percentages, because I'm dealing with a responsive website. On smaller screens, the background should be displayed completely (with less width, but still proportional), and the div who has the image should follow that size.
我正在尝试设置 div 的大小（宽度和高度）以匹配它的背景图像大小，但我无法让它工作。背景图像大小必须以百分比表示，因为我正在处理响应式网站。在较小的屏幕上，背景应完全显示（宽度较小，但仍成比例），并且具有图像的 div 应遵循该大小。
I tried various values of the background-size, such as auto 100%, cover, contain, etc. but nothing did the trick. There's a similar question here about this: scale div to background image sizebut it didn't solve my problem either.
我尝试了背景大小的各种值，例如自动 100%、覆盖、包含等，但没有任何效果。这里有一个类似的问题：将div 缩放到背景图像大小，但它也没有解决我的问题。
I'd really appreciate if someone knows how to do it.
如果有人知道怎么做，我真的很感激。
EDIT:I made a fiddle to show the behavior: http://jsfiddle.net/osv1v9re/5/This line is what is making the background image so small:
编辑：我做了一个小提琴来显示行为：http: //jsfiddle.net/osv1v9re/5/这一行是什么使背景图像如此之小：
background-size: auto 100%;
But if it is removed is removed, the background will fill the proper width, but not the height.
但是如果它被移除被移除，背景将填充适当的宽度，而不是高度。
回答by Heah
tag cannot adapt to background-image size, you need to use an tag and choose between height: auto for the div or javascript
标签无法适应背景图像大小，您需要使用标签并在 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;
}
回答by Dmitriy
*{
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>回答by Roger Causto
you can have a responsive height using the padding-bottom or padding-top because you can't fix an height property in '%' with a width in '%'.
您可以使用 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
}回答by Jakub Muda
If you want to make heightproportional to widthand set background-imagethis will do the job. There is an easy solution without using JavaScript. Just add <svg>with specific proportions inside a container.
如果你想使height成比例width并设置background-image这将完成这项工作。有一个不使用 JavaScript 的简单解决方案。只需<svg>在容器内按特定比例添加即可。
You must use image dimensions as viewBox <svg viewBox="0 0 960 628"></svg>
您必须使用图像尺寸作为 viewBox <svg viewBox="0 0 960 628"></svg>
Example:
例子：
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>