当前位置：文江博客话题详情

CSS：给一个div一个数字的倍数的高度？

发布于 2025-01-04 21:51:59 字数 160 浏览 5 评论 0原文

div 具有可平铺的背景。该 div 的高度取决于其内容。我需要将 div 拉伸背景图像大小的倍数。

例如，背景是 64x64 图像。因此，如果要增加 div 的高度，我想以 64px 为步长进行增加。

这可以用 CSS 实现吗？我还没有使用谷歌找到线索。感谢您抽出时间！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

巨坚强 2025-01-11 21:51:59

一种解决方案（取决于您的具体情况）可能是使用新的 background-size CSS 属性。为了清楚起见，我将声明分开：

div.yourDiv {
    background-image: url('yourImage.jpg');
    background-repeat: repeat;
    background-size: contain;
}

然后，无论 div 的大小如何，您的图像都会完美平铺而不会被切断。较旧的浏览器只会获取平铺图像，这可能是也可能不是问题。

One solution (depending on your specific case) could be to use the new background-size CSS property. I've left the declarations separate for clarity:

div.yourDiv {
    background-image: url('yourImage.jpg');
    background-repeat: repeat;
    background-size: contain;
}

Then, whatever the size of you div, your image will tile perfectly without being cut off. Older browsers will just get the tiled image, which may or may not be an issue.

回复收藏 0 原文

静待花开 2025-01-11 21:51:59

据我所知，这不能在 CSS 中完成，但你可能可以用一些 javascript 来解决它。如果您有权访问 jQuery：

$(function() {
    $div = $('#the_div_id');
    var remainder = $div.height() % 64;
    var newHeight = $div.height() + (64-remainder);
    $div.css('height', newHeight);
});

To my knowledge this cannot be done in CSS, but you could probably solve it with some javascript. If you have access to jQuery:

$(function() {
    $div = $('#the_div_id');
    var remainder = $div.height() % 64;
    var newHeight = $div.height() + (64-remainder);
    $div.css('height', newHeight);
});

回复收藏 0 原文