Full Width CSS - Responsive

我有一個背景圖片，我想填充（響應）頁面的寬度。即如果頁面很大，圖像的寬度也很大。但是，如果寬度縮小，圖像會被裁剪而不是縮放（因爲我希望高度保持不變，即任何地方都沒有空白）。Full Width CSS - Responsive

我大部分工作，除了填補寬度。

這裏是我的jsfiddle：https://jsfiddle.net/jwdyc1rh/

HTML：

<body class=" cms-index-index cms-home"> 

<div class="main-container col1-layout"> 
     <div class="main"> 
</div> <div> 
    </div>

CSS：

body.cms-home .main-container { 
    margin-top: -20px; 
    background-image: url(http://www.mrwallpaper.com/wallpapers/flower-field-summer-1280x1024.jpg); 
    background-repeat: no-repeat; 
    min-height: 1024px; 
    background-position: center; 
    width: 100%; 
}

的硬看實物不拉伸屏幕巨大，但你可以看到白色的背景如果它被拉伸，而不是圖像縮放以適應。

這是一個完美的例子，我想要的是www.prada.com，但我似乎無法找到正確的代碼。

來源

2015-05-27 user3217495

你試過'背景大小：contain'？ – aug

使用background-size: cover;

jsfiddle

來源

2015-05-27 05:58:30

YES！這樣做了，謝謝！ – user3217495

我被告知這不適用於Windows IE。任何想法？ – user3217495

應用背景大小像background-size: 100% 100%;

它會做的伎倆。

body.cms-home .main-container { 
    margin-top: -20px; 
    background-image: url(http://www.mrwallpaper.com/wallpapers/flower-field-summer-1280x1024.jpg); 
    background-repeat: no-repeat; 
    min-height: 1024px; 
    background-position: center; 
    width: 100%; 
    background-size: 100% 100%; 
}

Updated Fiddle

來源

2015-05-27 05:46:11 ketan

非常接近....無論如何阻止它扭曲圖像？ – user3217495

扭曲意味着什麼？ – ketan

像https://jsfiddle.net/jwdyc1rh/2/？ – ketan

background-repeat: no-repeat; 
background-attachment: fixed; 
background-size: cover;

來源

2015-05-27 08:07:40

Full Width CSS - Responsive

回答

相關問題