背景「的背景大小：蓋」不適合全高

我正在做一個頁面，只會顯示SVG圖像，和這裏的要求是：背景「的背景大小：蓋」不適合全高

載體應採取了整個窗口
載體應保持其寬高比
載體應以防止歪斜

的CSS裁剪/夾（在SVG文件本身定義）...

body { 
    background: url(/path/to/image.svg); 
    background-size: cover; 
}

...作品幾乎完全不同的是，當瀏覽器窗口過窄它圖塊而非裁剪/裁剪。

下面是一些屏幕截圖（請忽略由dabblet離開工件）： window close to aspect ratio

在這裏，窗口是接近原始圖像 window "shorter" than aspect ratio

這裏的縱橫比的窗口是「短「比縱橫比，並且圖像裁剪（根據需要）。 enter image description here

這裏窗口比縱橫比「窄」，但不是裁剪，圖像平鋪（不希望的）。

這裏有一些想法，我有...

我能以某種方式防止這種情況發生改變SVG圖像？
我可以標記/設置頁面樣式以實現所需的結果嗎？
我寧願保留在HTML/CSS的領域，但如果需要Javascript，那麼就這樣吧。

下面是我跟... http://dabblet.com/gist/6033198

來源

2013-07-18 apocryphalauthor

有趣的問題。恥辱我退出了投票:) – null

爲css背景自動發生平鋪，只需使用'background-repeat：no-repeat;' – Pebbl

@pebbl你是對的，background-repeat會阻止vector重複，但那doesn解決了矢量的y維度計算不準確的事實。圖像應填充窗口的y維度。 – vals

工作後的一些嘗試和錯誤的dabblet，這是我發現的。

添加（原來的CSS）：

html { 
    height: 100% 
}

交付正是我一直在尋找在原來的規格。

此外，如果我想要的圖像是中心，當它被裁剪，我可以使用：

html { 
    background: url(path/to/image.jpg) no-repeat center center fixed; 
    background-size: cover; 
}

最後，如果我想它爲中心，始終保持縱橫比，但不裁剪（即，一些空白是OK），那麼我可以這樣做：

body { 
    background: url(/path/to/image.svg) no-repeat center center fixed; 
    background-size: contain; 
}

來源

2013-07-20 00:07:32 apocryphalauthor

-3

這個CSS是working.Thanks

"background-size: contain;" 

.cover{background:url(images/cover.jpg) no-repeat top center; display:inline-block; width:100%; height:400px; background-size: contain;} 

<div class="cover">&nbsp;</div>

來源

2013-12-17 07:04:56 Raghibsuleman

背景「的背景大小：蓋」不適合全高

回答

相關問題