调整窗口大小时动态调整 div 背景图像答案

【问题标题】：Dynamically adjust div background-image when window is resized调整窗口大小时动态调整 div 背景图像
【发布时间】：2013-09-09 10:47:39
【问题描述】：

.step-1-4 {
  background:url('../images/gadget-4-sprite.png') 
  no-repeat; width:950px; 
  height:70px;
  margin-left: 15px;
}

上面是我拥有的包含背景图像的 div 的 CSS。我已将 div 的高度和宽度设置为与图像的尺寸相同。我遇到的问题是，当窗口重新调整大小（例如小于图像宽度）时，它会被切断。

有没有一种解决方案，我可以通过这种方式设置 CSS 样式，使 div 与其中的图像一起重新调整大小。我尝试将 div 的宽度设置为 100%，这可以正确调整 div 的大小，但是图像仍然没有调整大小。也许如果这不是一个好的解决方案，那么如何使用<img> 标签来实现。

【问题讨论】：

标签： html css

【解决方案1】：

使用background-size:cover; 或background-size:100% 100%;

所以你的 css 将是 ::

.step-1-4 {
  background:url('../images/gadget-4-sprite.png') no-repeat;
  background-size:100% 100%; /*..or  cover ...*/
  width:950px; 
  height:70px;
  margin-left: 15px;
}

【讨论】：