我有一个带有重复背景的 div。背景图片为 50px x 50px。
因为重复图像的高度为 50 像素,所以我希望 div 高度为 50 的倍数。这将确保重复背景图像,但不会被 div 的边缘截断。
- 是否有一种无需媒体查询的纯 CSS 方法?
- 有没有办法用媒体查询来做到这一点?
- 我知道它可以用 JavaScript,但我宁愿不必使用它(有很多对象具有这种类型的样式,并且宁愿不必
$.each()
它们全部)。
最佳答案
使用当前实现的 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设置为允许以行高的倍数调整元素的大小,但要实现这一点还有很长的路要走。
关于css - 纯 CSS 中的模块化高度 div(100 像素的倍数),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6933733/