CSS图像缩放以限制窗口宽度而不失真

Question

这是我在这里的第一个问题，如果我不太了解术语，我很抱歉。

我有一个背景图像，作为页脚信息的标志分隔符，我把它做成了2400px宽，这样它就可以在多个屏幕尺寸上完全显示。唯一的问题是，网页底部有一个大的滚动条，我只希望它限制到窗口宽度，并显示更多，因为有人可能会将网页宽度调整为更大或更小，并将其向下限制为更小。我最接近实现这一点的时候，它被限制在窗口的宽度，但它扭曲了图像。

这是我目前使用的CSS，它可能包含了很多多余的元素，这些元素对我没有帮助，我在谷歌上搜索了解决方案，但还是来到了这里。

footer {
    overflow: hidden;
    background: url(../img/aperture_labs_bot.png) no-repeat fixed; 
    background-image: url(../img/aperture_labs_bot.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: left; 
    background-size: 2400px 68px;
    background-size: cover;
    background-position: 50% 50%;

}

Answer 1

您是否尝试将背景大小更改为包含？

footer {
  background: url(../img/aperture_labs_bot.png) no-repeat fixed; 
  background-image: url(../img/aperture_labs_bot.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

我希望这能帮助。。。

Answer 2

试试这个：

  background: url(../img/aperture_labs_bot.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

这样，它就有了整个屏幕的宽度，当你缩小屏幕时，它就会缩放。

编辑；

HTML:

    <footer>
       <div class="footer-test">
          This text will be placed in the footer div. The div class footer-test will have a full-size background image no mather what width it has.
       </div>
    </footer>   

CSS：

.footer-test {
  background: url("http://www.cossumswimschools.co.uk/images/bg.jpg") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height:100px;
}

让我知道！