Div 内的 Twitter Bootstrap 响应式背景图像

Posted 2023-03-06

【中文标题】Div 内的 Twitter Bootstrap 响应式背景图像

【英文标题】：Twitter Bootstrap Responsive Background-Image inside Div

【发布时间】：2013-10-04 01:10:44

【问题描述】：

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

【问题讨论】：

不确定这是否是您正在寻找的解决方案，但根据引导文档：“Bootstrap 3 中的图像可以通过添加 .img-responsive 类来实现响应友好。这个将 max-width: 100%; 和 height: auto; 应用于图像，以便它很好地缩放到父元素。"

确定我可以将 img-responsive 类添加到 但这个是背景图片。谢谢尼克

【参考方案1】：

这样做的方法是使用背景大小，所以在你的情况下：

background-size: 50% 50%;

或

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

【讨论】：

感谢您的评论。我尝试了背景大小，但不起作用。

【参考方案2】：

我找到了解决办法。

background-size:100% auto;

【讨论】：

@redshift 您能否提供您所依据的统计数据，因为在每个指标中，我查看的 IE8 市场份额百分比都是个位数。

忽略@redshift 评论 - ie8 不再是一个非常大的演示 :) sitepoint.com/browser-trends-january-2016-12-month-review

【参考方案3】：

你也可以试试：

background-size: cover;

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

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

【讨论】：

就是这个。

【参考方案4】：

这应该可以工作

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;

【讨论】：

这行得通。随着您的页面变小，背景图像也会变小。您可能需要调整 % 以适应您的喜好，但最终它会起作用。同样，您不需要我们在此示例中进行背景设置。你可以使用类似背景的东西： url('yourimage') left 190px no-repeat;它仍然可以正常工作。

【参考方案5】：

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

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

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

【讨论】：

感谢布拉德，我使用了这个：background:#ddd url('../bg-header.png') no-repeat center top scroll; background-size: 100% cover;

尝试了几种解决方案，这是第一个有效的。

"background-size: 100% cover" -- 无效的属性值

【参考方案6】：

试试这个（应用到你图像所在的类（不是 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;

【参考方案7】：

我相信这也应该可以完成这项工作：

background-size: contain;

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

【参考方案8】：

不要使用固定的：

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

【参考方案9】：

Mby bootstrap img-responsive 类是你要找的。​​p>