html - Chrome 背景尺寸不准确？

Question

我遇到背景图片在 Chrome 中无法正确缩放的问题。我在下面包含了我的代码以及代码笔链接。您会注意到，尽管设置为 20% 宽度，但背景图像确实完全适合 5 倍。有人对此有修复或解决方法吗？

CSS

    #vsb-screen-preview { 
    background-image: url(/screen-builder-screen.png); 
    background-size: 20% 25%; 
    background-position: top left; 
    float: left;   
    width: 454px; 
    height: 316px;}

    .vsb-screen-preview-bg {
    float: left; 
    overflow: hidden; 
    width: auto; 
    height: auto; 
    box-shadow: 0px 0px 10px 5px rgba(0,0,0,1); 
    background-image: url(/pexels-photo-361951.jpeg); 
    background-size: cover; 
    background-position: center center;
    position: relative;}

HTML

    <div class="vsb-screen-preview-bg">
    <div id="vsb-screen-preview">
    </div>
    </div>

如有任何帮助，我们将不胜感激。

https://codepen.io/anon/pen/BWMGrz

Answer 1

原因是 Chrome 错误。当您设置背景大小时，它只会重复和乘以整数而不是小数。因此，如果您的值是 float 、比例或百分比，则在 Chrome 中会出错。

经过 2 小时的尝试找出 chrome 间距不同的原因后，我才发现这一点。

除了要求尽可能多的人报告错误以便他们修复它之外，我还没有找到解决方法。