Html Div 内的 Twitter Bootstrap 响应式背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19055811/
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
Twitter Bootstrap Responsive Background-Image inside Div
提问by vkatsitadze
How i can modify #bgimage so it would be responsive, resizable and proportional in all browser?
我如何修改#bg图像，使其在所有浏览器中都具有响应性、可调整大小和比例？
HTML:
HTML：
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 col-sm-6 col-xs-12 well" id="bg">
</div>
<div class="col-md-2"></div>
</div>
</div>
css:
css：
@import url('bootstrap.min.css');
body{
background: url('../img/bg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin-top: 12%;
}
#bg{
background:url('../img/con_bg4.png') no-repeat center center;
height: 500px;
}
回答by vkatsitadze
I found a solution.
我找到了解决方案。
background-size:100% auto;
回答by doodelicious
You might also try:
您也可以尝试：
background-size: cover;
There are some good articles to read about using this CSS3 property: Perfect Full Page Background Image by CSS-Tricksand CSS Background-Size by David Walsh.
有一些关于使用此 CSS3 属性的好文章可供阅读：CSS-Tricks 的 Perfect Full Page Background Image和David Walsh 的 CSS Background-Size。
PLEASE NOTE - This will not work with IE8-. However, it will work on most versions of Chrome, Firefox and Safari.
请注意 - 这不适用于 IE8-。但是，它适用于大多数版本的 Chrome、Firefox 和 Safari。
回答by Jowita Emberton
Try this (apply to a class you image is in (not img itself), e.g.
试试这个（适用于你图像所在的类（不是 img 本身），例如
.myimage {
background: transparent url("yourimage.png") no-repeat top center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100%;
height: 500px;
}
回答by KevinAdu
I believe this should also do the job too:
我相信这也应该可以完成这项工作：
background-size: contain;
background-size: contain;
It specifies that the image should be resized to fit within the element without losing it's aspect ratio.
它指定图像应调整大小以适应元素而不会丢失其纵横比。
回答by Mashhood
I had the similar issue and i solved it using:
我遇到了类似的问题，我使用以下方法解决了它：
background:url(images/banner1.png) no-repeat center top scroll;
background-size: 100% auto;
padding-bottom: 50%;
... here i had to add the padding: 50%because it wasn't working for me otherwise. It allowed me to set the height of container, as per the size ratio of my banner image. and it is also responsive in my case.
...在这里我不得不添加padding: 50%因为否则它对我不起作用。它允许我根据横幅图像的大小比例设置容器的高度。在我的情况下它也有响应。
回答by RayKech
Don't use fixed:
不要使用固定：
.myimage {
background:url(admin-user-bg.png) no-repeat top center;
background: transparent url("yourimage.png") no-repeat top center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100%;
height: 500px;
}
回答by Dzintars
Mby bootstrap img-responsiveclass is you looking for.
img-responsive您正在寻找Mby 引导程序类。
回答by Jay
This should work
这应该工作
background: url("youimage.png") no-repeat center center fixed;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto;
回答by Hive7
The way to do this is by using background-size so in your case:
这样做的方法是使用 background-size 所以在你的情况下：
background-size: 50% 50%;
or
或者
You can set the width and the height of the elements to percentages as well
您也可以将元素的宽度和高度设置为百分比
