CSS图像缩放以约束到窗口宽度，而不是扭曲

这是我在这里的第一个问题，所以我很抱歉，如果我没有得到术语。CSS图像缩放以约束到窗口宽度，而不是扭曲

我有一个是作为标志分隔页脚信息，这是我做2,400px宽所以它会在多个屏幕尺寸完全显示的背景图像。唯一的问题是，有一个大的底部滚动到网页，我只是想限制到窗口的宽度，并显示更多的人可能会调整网页的宽度更大或更小，它约束更小。我得到的最接近的是当它被限制到窗口的宽度，但它扭曲了图像。

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

}

来源

2015-12-02 Jenga

我的HTML和CSS链路 codepen.io/jenngga/pen/RrbQPp 我有评论指出，没有工作相当多的东西，对不起它目前是一团糟，我仍然处于草稿/调整阶段。谢谢大家的帮助！我有一个更新，以及，出于某种原因，图像不会缩小和了窗口宽度正是我需要我的表单页面上，但不会对其他任何网页... http://codepen.io/jenngga/pen/ZQzxpO – Jenga

试试这个：

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

让我知道！

来源

2015-12-02 14:40:27

嗯，由于某些原因，它仍然无法正确缩放。我试过评论一些代码，看看它是否有冲突，但仍然没有运气 – Jenga

你可以发布你的其他代码的html/css吗？也许我错过了一些东西。 –

http://codepen.io/jenngga/pen/RrbQPp 我上传到Codepen，但不知道是否我可以上传我的图片进去。我已经评论了很多不起作用的东西，并且现在很抱歉它一团糟，我仍然处于草稿/调整阶段。感谢您的帮助！ – Jenga

你有没有试图改变背景大小的含有？

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

我希望这有助于...

来源

2015-12-02 15:57:05 steffcarrington

CSS图像缩放以约束到窗口宽度，而不是扭曲

回答

相关问题