纯 CSS 中的模块化高度 div（100px 的倍数）
我有一个带有重复背景的 div。背景图像为 50 像素 x 50 像素。
由于重复图像的高度为 50 像素，因此我希望 div 高度为 50 的倍数。这将确保背景图像重复，但不会被 div 的边缘截断。
- 有没有一种纯 CSS 方法可以在没有媒体查询的情况下做到这一点？
- 有没有办法通过媒体查询来做到这一点？
- 我知道 JavaScript 可以做到这一点，但我宁愿不必使用它（有很多具有这种类型样式的对象，并且不想将它们全部使用
$.each()）。
I have a div with a repeating background. The background image is 50px x 50px.
Because the repeating image is 50px high, I would like the div height to be in MULTIPLES OF 50. This will assure that the background image is repeated, but not cut-off by the edge of the div.
- Is there a pure CSS way to do this without media queries?
- Is there a way to do this with media Queries?
- I know it's possible with JavaScript, but I wold rather not have to use it (there are lots of objects with this type of styling, and would rather not have to
$.each()them all).
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
使用当前实现的 CSS 来接近此效果的唯一方法是
border- image，但它不会完全按照您想要的方式工作。您无需将元素大小设置为 50px 的倍数，而是缩放 50px 组件，以便它们适合元素。它的工作原理如下：用现有背景图像的九个图块制作一个 150 像素 x 150 像素的图像，然后指定如下规则：
round关键字意味着图像的中间切片将重复并适当拉伸以适合元素。仅当您将元素的最小尺寸设置为至少 150 像素正方形时，这才真正起作用。在实用性方面，支持有点参差不齐，我不认为任何浏览器都已实现当前规范。使用供应商特定属性时，您可以省略fill关键字。除此之外，CSS3 Line Grid 模块设置为允许调整元素是行高的倍数，但实现起来还有很长的路要走。
The only way to get close to this with currently implemented CSS is
border-image, but it wouldn't work exactly as you want. Instead of making the element size a multiple of 50px, you would instead scale the 50px components so that they fit the element.It would work something like this: make a 150px by 150px image out of nine tiles of your existing background image, then specify a rule something like this:
The
roundkeyword means the middle slices of the image will repeat and stretch as appropriate to fit the element. This would only really work at all if you set minimum dimensions on the element to at least 150px square. On the practicalities front, support is a bit patchy, I don't think any browsers have implemented the current spec yet. You can leave off thefillkeyword when using the vendor specific properties.Other than that, the CSS3 Line Grid module is set to allow the sizing of elements in multiples of line height, but implementations are still a long way off for that.