Twitter的Bootstrap响应背景图像内Div
如何修改#bg图片，以便在所有浏览器中都能够响应，resize和成比例？
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：
@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; }
我find了解决scheme。
background-size:100% auto;
你也可以尝试：
background-size: cover;
有一些很好的文章可以阅读关于使用CSS3属性： 通过CSS-Tricks和CSS背景大小来 完善整页背景图像 David Walsh 。
请注意 – 这不适用于IE8-。 但是，它可以在大多数版本的Chrome，Firefox和Safari上运行。
试试这个（适用于你的图像类（不是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; }
我有类似的问题，我解决了它使用：
background:url(images/banner1.png) no-repeat center top scroll; background-size: 100% auto; padding-bottom: 50%;
…在这里，我不得不添加填充：50％，因为它不适合我的工作，否则。 它允许我设置容器的高度， 根据我的横幅图像的大小比例 。 而且对我来说也是有回应的
我相信这也应该做这个工作：
background-size: contain;
它指定应调整图像大小以适应元素，而不会丢失高宽比。
做到这一点的方式是在你的情况下使用背景大小：
background-size: 50% 50%;
要么
您也可以将元素的宽度和高度设置为百分比
不要使用固定的：
.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; }
Mby bootstrap img-responsive类是你在找。
这应该工作
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;
