Question

我如何修改#bg图片，使其在所有浏览器中都具有响应性，可调整大小和比例？

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;
}

Answer 1

我找到了解决方案。

background-size:100% auto;

Answer 2

您也可以尝试：

background-size: cover;

有一些关于使用此CSS3属性的好文章：P erfect Full Page Background Image by CSS-Tricks和CSS Background-Size by David Walsh。

请注意 - 这不适用于IE8-。但是，它适用于大多数版本的Chrome，Firefox和Safari。

Answer 3

试试这个（适用于图像所在的类（不是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;
}

Answer 4

我有类似的问题，我使用以下方法解决了这个问题：

background:url(images/banner1.png) no-repeat center top scroll;
background-size: 100% auto;
padding-bottom: 50%;

... 在这里我必须添加填充：50％因为它不适合我。它允许我根据我的横幅图像的大小比例设置容器的高度。而且在我的情况下也是如此。

Answer 5

我相信这也应该做的工作：

background-size: contain;

它指定应调整图像大小以适应元素，而不会失去它的宽高比。

Answer 6

执行此操作的方法是使用background-size，所以在您的情况下：

background-size: 50% 50%;

或

您也可以将元素的宽度和高度设置为百分比

Answer 7

这应该有效

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;

Answer 8

不要使用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;
}

Answer 9

你正在寻找Mby bootstrap img-responsive课程。

Twitter Bootstrap响应背景 - Div内部的图像

9 个答案: