全屏背景圖像被拉伸

我爲我的一個客戶做了一個全屏幕的背景圖像，但問題是，當我使圖像使用下面的CSS代碼適合所有的屏幕：全屏背景圖像被拉伸

#bg-image img{ 
position:fixed; 
left:0; 
top:0; 
width:100%; 
max-height: 100%; 
} 
#bg-image{ 
height: 100%; 
width: 100%; 
float: left; 
overflow: hidden; 
position: relative; 
}

一切正常，因爲圖像填充了我主頁的所有背景，但問題是現在背景圖像似乎被拉長了，我想知道如何使圖像的大小或比例正確以適應整個屏幕尺寸而不會被拉伸（具有完整質量），以使背景圖像的質量達到完美。

那麼，如何讓我的圖像完美適合我的主頁背景。

任何幫助將非常感謝！

來源

2013-11-27 Hamza Abd Elwahab

這裏有幾個不錯的選擇，甚至一些在IE8工作。雖然背景大小非常簡單，但IE8不支持它。如果這不是一個因素，那麼不要擔心。 http://css-tricks.com/perfect-full-page-background-image/ –

你應該真的看看background size屬性，而不是使用固定的圖像。使用'cover'作爲背景大小，意味着圖像應該增大或縮小到足以覆蓋整個背景。

如果你知道圖像的尺寸。您可以使用媒體查詢將背景大小更改爲「自動」，否則會超出其原始大小。

html, body { 
    min-height: 100%; 
} 
body { 
    background-image: url(http://leydenlewis.com/images/LANDING_PAGE.jpg); 
    background-repeat: no-repeat; 
    background-position: 0 0; 
    background-size: cover; 
} 
@media (min-width: 1120px), (min-height: 630px) { 
    body { background-size: auto; } 
}

來源

2013-11-27 22:47:39

背景顯示正確，但問題是圖像看起來如此拉伸，我希望它以高質量出現並適合整個屏幕（如沒有滾動）一些如何，這對我來說非常重要。我不知道我是否可以使用css 3或通過調整圖像的大小以完整質量出現。 –

這絕對是要走的路，不要忘記IE8不支持'background-size'，所以你可能會讓一小部分用戶感冒。 –

問題是，圖片仍然在我的網站上拉伸，我希望它看起來100％的質量。你可以在這裏看到http://leydenlewis.com/ –

試着做這樣的事情：

#bg-image { 
position:fixed; 
left:-50%; 
top:-50%; 
width:200%; 
height: 200%; 
} 

#bg-image img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: auto; 
    min-width: 50%; 
    min-height: 50%; 
}

這應該得到你想要的結果和工作在大多數瀏覽器也是如此。

來源

2013-11-27 22:53:39

不幸的是，這已經裁剪了我的形象是頂部和底部，所以並不是所有的圖像現在都出現了。我希望我的圖像在我的主頁上顯示100％，但是質量很好，我不希望它看起來很舒展。是鏈接到我的網站http://leydenlewis.com/ –

嘗試在此鏈接中的方法之一，看看他們中的任何一個爲你工作：http://css-tricks.com/perfect-full-page-background -image/ –

@HamzaAbdElwahab此外，如果您希望背景圖像保持縱橫比並填充整個屏幕，而不考慮屏幕尺寸，則必須在某個時間點裁剪圖像。 –

這應該保持圖像的正確比例：

#bg-image{ 
height: auto; 
width: auto; 
float: left; 
overflow: hidden; 
position: relative; 
}

來源

2013-11-28 14:57:04 guymid

<style> 
body { 
background: url(http://37.media.tumblr.com/tumblr_lusitdffhf1qj5tnlo1_r1_500.gif); 
background-size: 320px 600px; 
background-repeat: no-repeat; 
padding-top: 40px; 
} 
</style>

來源

2014-06-12 13:23:08

請解釋您的代碼 – Gwenc37

雖然此代碼可能有助於解決問題，但代碼只有答案不是高質量。一個更好的答案告訴代碼做什麼，解釋爲什麼採取這種方法，顯示代碼插入的位置，以及指向相關文檔的鏈接。 –

由於問題沒有具體說明CSS只（或不使用Javascript），這裏是我已經制定了一個jQuery解決方案並一直在使用。我注意到移動瀏覽器可能存在問題。

//resize the background image 
function resizeImage($selection){ 
    //get the ratio of the image 
    var imageRatio = $selection.width()/$selection.height(); 

    //get the screen ratio 
    var screenRatio = $(window).width()/$(window).height(); 

    //if the image is wider than the screen 
    if(imageRatio > screenRatio){ 
     $selection.height($(window).height()); //set image height to screen height 
     $selection.width($(window).height()*imageRatio); //set the correct width based on image ratio 
    } 

    //if the screen is wider than the image 
    else{ 
     $selection.width($(window).width()); //set the image width to the screen width 
     $selection.height($(window).width()/imageRatio); //set the correct image height based on the image ratio 
    } 
}

運行此，每當你想調整圖片的大小，通常在「在onResize」和「的onload」

<body onresize="resizeImage($('#bgImage'))">

來源

2014-06-20 06:40:26 Adam

全屏背景圖像被拉伸

回答

相關問題