css - 纯 CSS 中的模块化高度 div(100 像素的倍数)

Question

我有一个带有重复背景的 div。背景图片为 50px x 50px。

因为重复图像的高度为 50 像素，所以我希望 div 高度为 50 的倍数。这将确保重复背景图像，但不会被 div 的边缘截断。

1. 是否有一种无需媒体查询的纯 CSS 方法？
2. 有没有办法用媒体查询来做到这一点？
3. 我知道它可以用 JavaScript，但我宁愿不必使用它(有很多对象具有这种类型的样式，并且宁愿不必 $.each() 它们全部)。

Answer 1

使用当前实现的 CSS 接近这个的唯一方法是 border-image ，但它不会完全按照您的意愿工作。不是将元素大小设为 50 像素的倍数，而是缩放 50 像素的组件以使其适合元素。

它会像这样工作:从现有背景图像的九个图 block 中制作一个 150 像素 x 150 像素的图像，然后指定如下规则:

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

round 关键字意味着图像的中间切片将重复并适当拉伸(stretch)以适合元素。如果您将元素的最小尺寸设置为至少 150 平方像素，这只会真正起作用。在实用性方面，support is a bit patchy ，我认为还没有任何浏览器实现了当前规范。使用供应商特定属性时，您可以省略 fill 关键字。

除此之外，CSS3 Line Grid module设置为允许以行高的倍数调整元素的大小，但要实现这一点还有很长的路要走。