如何使 div 背景图像响应？答案

【问题标题】：How to make div background image responsive?如何使 div 背景图像响应？
【发布时间】：2016-01-31 23:18:28
【问题描述】：

我想让 div 的背景图像具有响应性。我使用了 bootstrap 3.3 我为背景图像编写了自己的 CSS。我的代码如下。

.search-row-wrapper
{
  background:url(../../Images/frontend/MassageBanner.jpg );
  background-size: cover;
  height:400px;
  padding:50px 0;
  transition:all 400ms cubic-bezier(0.25,0.1,0.25,1) 0s;
  -webkit-transition:all 400ms cubic-bezier(0.25,0.1,0.25,1) 0s;width:100%;
}

我已经查看了来自 stackoverflow 的相同问题链接，但它们对我不起作用。 Link1 Link2

【问题讨论】：

你的代码没问题，你的意思是让图片适应所有尺寸的div的尺寸吗？
是的，我想将 div 的背景图像调整为所有尺寸，例如（移动设备、平板电脑或台式机）
尝试在其中添加background-position: center;。
是的，（背景位置：中心；）它有效。谢谢@Claudiordgz

标签： css twitter-bootstrap

【解决方案1】：

你只是缺少background-position: center;，其余的都很完美

【讨论】：

【解决方案2】：

方法一：

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

适用于：

Safari 3+

Chrome 随便+

IE 9+

Opera 10+

方法二：

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

适用于：

Safari / Chrome / Opera / Firefox / IE 9

IE 6：Borked - 但如果您使用某种固定定位垫片，可能可以修复

IE 7/8：大多数情况下都有效，不会以小尺寸居中，但可以很好地填满屏幕

有关方法的更多信息和This article对您的提问很有用。

【讨论】：