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圖像縮放以約束到窗口寬度，而不是扭曲

回答

相關問題