修改

Question

我自己尝试解决问题，但我不能这样做。

访问我的网站：

向下滚动到页脚。在页脚上方，您将看到一个图像。它是那个说“完成事情，开始购买”和“＃34;这是我遇到问题的图像...

在我的浏览器/分辨率上，它看起来完全一致，但是一位朋友告诉我，在他的分辨率上，它并没有从左到右覆盖整个空间。如果按＆＃34; Ctrl + - ＆＃34;在键盘上你会看到问题。

这是我用来将图像放在那里的代码：

<img style="margin-bottom: -20px;" src="http://digesale.com/wp-content/uploads/2015/05/digesale-buy-how-it-works.png" alt="Digesale - How it works!" height="300" width="1350">

任何人都可以帮我制作该图片覆盖该部分的整个宽度，即使在较小的屏幕分辨率下它看起来也不错吗？

谢谢。

Answer 1

如果您需要保护，可以将图像用作背景：

Edge

并在css中

 <div class="background"></div>

重要的部分是.background { background: url(http://digesale.com/wp-content/uploads/2015/05/digesale-buy-how-it-works.png) top left no-repeat; background-size: cover; width: 100%; height: 100%; }，因为它在所有情况下都会填满整个div。

修改

如果您想要其他行为，可以使用旧的img标记

background-size: cover

和css

 <img src="http://digesale.com/wp-content/uploads/2015/05/digesale-buy-how-it-works.png" alt="Digesale - How it works!" class="responsive-img">

Answer 2

尝试以下CSS

.background {
  background: url(http://digesale.com/wp-content/uploads/2015/05/digesale-buy-how-it-works.png) top left no-repeat;
  background-size: contain;
  width: 100%;
  height: 26vw;
}

图像未覆盖较小分辨率的容器

2 个答案:

修改