2012-02-10 110 views
6

div有tilable背景。這個div的高度將取決於其內容。我需要div來擴展多倍的背景圖片大小。CSS:給一個div的高度是一個數字的倍數?

例如,背景是64x64圖像。 所以,如果div的高度要增加,我想這樣做的步驟爲64px。

這是可能的CSS?我還沒有找到使用谷歌的線索。謝謝你的時間!

+1

javascript可以接受嗎? – ANeves 2012-02-10 14:00:39

+3

你不能在CSS中這樣做 - 一般來說,CSS不允許你在動態大小的元素的內容上設置樣式。 – Oliver 2012-02-10 14:01:52

+1

在簡單的css中無法實現。試試jQuery。 – NewUser 2012-02-10 14:14:51

回答

6

據我所知,這不能在CSS中完成,但你可能可以解決它與一些JavaScript。如果您有權訪問jQuery:

$(function() { 
    $div = $('#the_div_id'); 
    var remainder = $div.height() % 64; 
    var newHeight = $div.height() + (64-remainder); 
    $div.css('height', newHeight); 
}); 
+0

即使沒有jQuery,也可以用javascript解決。 – Rob 2012-02-10 14:12:09

+0

是的,我認爲我會在文檔準備好之後以這種方式走下去。謝謝=) – Jem 2012-02-10 14:38:14

+0

不客氣。順便說一句,'$(function(){...});'是「當DOM準備就緒時執行此操作」的簡寫形式,以防您對jQuery不熟悉。正如@Rob所說,它也可以用原生Javascript完成,我個人更喜歡jQuery。 – Christoffer 2012-02-10 15:09:12

0

div的內容是什麼?這聽起來像不是將div的大小設置爲正確的值,您需要注意內容 - this post的細節一些非常簡單的技術來實現垂直節奏,它應該工作(即通過使用64px的線高度)

+0

它實際上是關於一個媚俗UI:div代表一個梯子,它的高度是成比例的從屏幕頂部到div的高度 - 使連接到終結器元素的必要平鋪。 – Jem 2012-02-10 14:37:50

4

一個解決方案(取決於您的具體情況)可能是使用新的background-size CSS屬性。我已經離開了單獨的聲明爲清楚起見:

div.yourDiv { 
    background-image: url('yourImage.jpg'); 
    background-repeat: repeat; 
    background-size: contain; 
} 

然後,無論你div大小,你的形象將瓦片完全沒有被切斷。較老的瀏覽器只會得到平鋪的圖像,這可能是也可能不是問題。

+0

非常有趣,我現在試試這個! – Jem 2012-02-10 14:36:39

相關問題