css - 纯 CSS 中的模块化高度 div（100px 的倍数）

Question

我有一个重复背景的 div。背景图像为 50 像素 x 50 像素。

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

1. 有没有一种纯 CSS 方法可以在没有媒体查询的情况下做到这一点？
2. 有没有办法通过媒体查询来做到这一点？
3. 我知道使用 JavaScript 是可能的，但我宁愿不必使用它（有很多具有这种样式的对象，并且宁愿不必$.each()全部使用）。

Answer 1

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

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

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

关键字表示图像的round中间切片将根据需要重复和拉伸以适合元素。如果您将元素的最小尺寸设置为至少 150px 正方形，这只会真正起作用。在实用性方面，支持有点不完整，我认为还没有任何浏览器实现了当前规范。fill使用供应商特定属性时，您可以省略关键字。

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