全寬自適應網站正文圖片

我被困在某物。我需要創建一個具有全寬度背景圖像的單頁網站，但在網站中打開時，圖像會在兩側被剪切。全寬自適應網站正文圖片

該網站是在直播here

目前我使用直道。但我已經嘗試過使用100％和自定義CSS，然後效果會相同或更差。甚至使用封面作爲背景大小。

有沒有什麼辦法解決這個問題，以便在移動設備上打開圖像？

來源

2014-01-19 user2485649

那麼會是怎樣的目標呢？你提供一個風景圖像，你想在肖像視圖上顯示它？如果是這樣你必須處理空白或圖像顯示不正確。使用兩個不同的圖片，通過媒體查詢選擇它們，並使用background-size：cover – Sven

感謝您的回覆，但我使用jquery根據瀏覽器寬度來固定高度。 – user2485649

我與JS的幫助下做這件事。

function updateSize() { 
    var width = $(window).width(); 
    var height = $(window).height(); 

    $('.image-con').css('width', width); 
    $('.image-con').css('height', height); 
}; 
$(document).ready(updateSize); 
$(window).resize(updateSize);

和CSS

.image-con { 
    background-image: url(bg.jpg); 
    background-repeat: no-repeat; 
    background-size: 100% 100%; 
}

來源

2014-01-20 09:36:54 user2485649

使用CSS background-image屬性，而不是實際的img

body{ 
    background:url(bg.jpg) no-repeat; 
    background-size:cover !important; 
}

你還會發現它一個更容易與背景，而不是img

來源

2014-01-19 20:51:32 ggdx

等待讓我更新這個，並看到變化:) – user2485649

現在看到當我在iPhone中打開它時，我看到底部的空間，我不需要在那裏。 – user2485649

嘗試添加供應商前綴。 -webkit-background-size：cover; -moz-background-size：cover; background-size：cover; – Varinder

HTML元素（根操縱你的其他網頁元素）必須有ATLEAST min-height:100%

所以標記

<html style="min-height:100%; padding:0; margin:0;"> 
    <body style="margin:0; padding:0; height:100%;"> </body> 
</html>

哦，是啊，一旦測試，將這些內聯樣式提取到樣式表中

希望有所幫助。

編輯

繼承人最好的，你可以做

CSS：

body { 
    /*background-attachment: scroll;*/ 
    /*background-clip: border-box;*/ 
    background-color: rgba(0, 0, 0, 0); 
    background-image: url("bg.jpg"); 
    /*background-origin: padding-box;*/ 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-size: cover; 
    font-family: 'PetitaBold'; 
}

來源

2014-01-19 21:40:46 Varinder

檢查兄弟，它仍然削減圖像：（ – user2485649

嘿男人，你不能避免切割我猜，編輯的CSS你可以做的最好 – Varinder

是的，我認爲圖像將被切割..我再次編輯它和門檻相同。 – user2485649

全寬自適應網站正文圖片

回答

相關問題