HTML/CSS：如何将Div宽高设置为瓦片尺寸的整数倍？

当然可以不用硬编码实现，用CSS的相对单位结合数值取整函数就能搞定，适合初学者的方案如下：

核心思路 #

利用视口单位（vw/vh）获取视口比例，再通过CSS的round()/floor()/ceil()函数将计算结果调整为32px的整数倍，确保瓦片不会被截断。

修改后的完整代码 #

/* Note: tower-sides.png is a 32x32 png with no transparency. */

/* 全局定义CSS变量，确保所有元素都能访问 */
:root {
  --sidebarbg: #你的背景色值; /* 记得补全你的背景色变量值 */
  --sidebarimg: url("/assets/main/img/tower-sides.png");
}

/* Sidebar样式 */
aside{
  /* 宽度取视口20%的最近32px整数倍 */
  width: round(20vw, 32px);
  /* 最小高度取视口80%的最近32px整数倍 */
  min-height: round(80vh, 32px);
  background-color: var(--sidebarbg);
  background-image: var(--sidebarimg);
  /* 默认background-repeat就是repeat，瓦片会自动平铺 */
  font-size: smaller;
}

#left-sidebar{order: 1;}
#right-sidebar{order: 3;}

细节说明 #

• CSS变量修复：原来的变量定义缺少作用域，放在:root下才能全局生效，否则aside无法读取到--sidebarimg。
• 尺寸取整逻辑：
  • round(20vw, 32px)：把20%视口宽度的值四舍五入到最近的32px倍数
  • 如果需要严格不超过20vw，用floor(20vw / 32px) * 32px（向下取整）
  • 如果需要至少达到20vw，用ceil(20vw / 32px) * 32px（向上取整）
• 瓦片不截断：只要宽高是32px的整数倍，背景图默认平铺就不会出现截断问题。

兼容性说明 #

round()/floor()/ceil()是CSS Values and Units Module Level 4的特性，目前Chrome、Firefox、Edge等主流浏览器都已支持，无需担心兼容性问题。

内容的提问来源于stack exchange，提问作者spriterjohnson