Question

.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>标签实现这一目标。

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

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

1 个答案: