純CSS中的模塊化高度div（100px的倍數）

Question

我有一個具有重複背景的div。背景圖像是50px x 50px。

因爲重複的圖像是50px高，我希望div高度在MULTIPLES OF 50。這將確保背景圖像被重複，但不會被div邊緣截斷。

1. 有沒有一個純CSS的方式來做到這一點，沒有媒體查詢？
2. 有沒有辦法與媒體查詢做到這一點？
3. 我知道這是可能的JavaScript，但我會寧願不必使用它（有這種類型的樣式很多對象，而不是必須$.each()他們都）。

Answer 1

使用當前實施的CSS來解決這個問題的唯一方法是border-image，但它不會像你想的那樣工作。不是將元素大小設置爲50px的倍數，而是縮放50px組件，以使它們適合元素。

它的工作是這樣的：做一個150像素像素的圖片出來的現有背景圖片九塊，那麼指定規則是這樣的：

border-image: url(bg.png) 50 round fill; 

的round關鍵字意味着中間片圖像將重複並拉伸以適應元素。如果您將元素的最小尺寸設置爲至少150px的平方，這隻會真正起作用。在實用性方面，support is a bit patchy，我認爲任何瀏覽器都沒有實現當前的規範。使用供應商特定屬性時，您可以不使用fill關鍵字。

除此之外，CSS3 Line Grid module被設置爲允許按照線高度的倍數來確定元素的大小，但是實現對於這一點還有很長的路要走。