60

我如何修改#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;
}
4

9 回答 9

80

我找到了解决方案。

background-size:100% auto;
于 2013-09-27T16:55:15.027 回答
24

你也可以试试：

background-size: cover;

有一些关于使用这个 CSS3 属性的好文章可供阅读：CSS-Tricks 的 P erfect Full Page Background Image和David Walsh 的 CSS Background-Size。

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

于 2013-12-31T17:44:01.497 回答
7

试试这个（适用于你图像所在的类（不是 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;
}
于 2014-12-18T15:43:20.250 回答
6

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

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

...在这里我必须添加填充：50%，因为否则它对我不起作用。它允许我根据横幅图像的大小比例设置容器的高度。在我的情况下它也是响应式的。

于 2014-12-15T10:32:01.163 回答
6

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

background-size: contain;

它指定应调整图像大小以适应元素而不丢失其纵横比。

于 2015-01-20T08:02:17.830 回答
1

执行此操作的方法是使用背景大小，因此在您的情况下：

background-size: 50% 50%;

或者

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

于 2013-09-27T16:41:09.810 回答
1

这应该工作

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;
于 2014-07-15T10:10:59.787 回答
1

不要使用固定：

.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;
}
于 2015-04-07T11:07:10.420 回答
1

img-responsive您正在寻找Mby 引导类。

于 2016-11-18T20:13:43.970 回答