浏览器缩放时标题背景图像消失答案

【问题标题】：Header Background Image Disappears Upon Browser Zooming浏览器缩放时标题背景图像消失
【发布时间】：2015-09-17 16:08:12
【问题描述】：

在 Google Chrome 浏览器上放大 out 使header 的背景图像看起来消失了。图像的宽度为 1px，但它水平重复。

HTML

<html>
    <body>
    <div id="wrapper">
        <header id="header">
            <div id="Nav-Bar"></div>
        </header>
</html>

CSS

#header {
    width: 100%;
    height: 220px;
    background: url("img/headerpattern.png") repeat-x;
    background-size: 1px 165px;
}

无论有人放大/缩小，我都希望页面的布局保持不变。是什么导致了这种行为？

【问题讨论】：

制作一个 jsFiddle 来演示这个问题。甚至没有看到背景图像就很难诊断。
我试图在这篇文章之前创建一个 jsFiddle，但是复制问题似乎没有用（我确实做得很快）。背景图像本身不是问题，它实际上可以是任何 1px 宽、水平重复的图像，它的行为总是相同的。

【解决方案1】：

如果缩小窗口，宽度为 1px 的图像会变小并接近于零。不会显示零宽度。

我测试了一张图片，如果您使用 4 像素宽度的图片，Google Chrome 中的缩小效果会达到 25%（最大缩小）。

【讨论】：