如何使背景图片适配Chrome浏览器所有缩放比例？

问题根源 #

• 浏览器默认的body边距会导致元素与屏幕边缘产生间隙，缩放时该问题会被放大
• 100vh在Chrome的缩放场景下，视口高度计算可能存在微小偏差，导致高度不足
• 未确保父元素（html/body）的高度完全撑满视口

修复步骤 #

1. 重置全局默认样式 #

先消除html和body的默认边距，避免额外间隙影响适配：

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden; /* 防止缩放时出现滚动条遮挡内容 */
}

2. 调整article的样式 #

替换100vh为更可靠的高度方案，同时优化背景图渲染逻辑：

article{
    display: flex;   
    width: 100%;
    height: 100%; /* 继承父元素的100%高度，精准适配视口 */
    /* 若需更适配动态场景，可改用现代浏览器支持的动态视口高度：height: 100dvh; */
    background-image: url("/Assets/Choose-role-image.png");
    background-repeat: no-repeat;
    background-size: 100% 100%; /* 保持你需要的强制拉伸适配效果 */
    background-position: top left; /* 确保图片从左上角开始渲染，避免偏移 */
}

额外说明 #

• 如果希望保持图片比例并完全覆盖屏幕（不强制拉伸），可将background-size: 100% 100%替换为background-size: cover
• 100dvh是CSS的动态视口高度单位，能更精准适配各种缩放场景，Chrome 108+已支持，兼容性足够时优先使用

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