html - CSS 图像缩放以限制窗口宽度而不扭曲

Question

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

我有一个背景图片用作页脚信息的 Logo 分隔符，我将其设置为 2,400 像素宽，以便它可以在多种屏幕尺寸上完全显示。唯一的问题是网页底部有一个大滚动条，我只想将其限制为窗口宽度，并显示更多内容，因为有人可能会将网页宽度调整得更大或更小，并将其限制为更小。我最接近实现这一点的是当它被限制在窗口的宽度时，但它扭曲了图像。

这是我目前正在使用的 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

您是否尝试过将background-size 更改为包含？

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

我希望这有助于...