Question

我遇到的问题是背景图片在Chrome中无法正确缩放。我在下面包含了我的代码以及codepen链接。您会注意到，尽管设置为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错误。设置背景大小时，它只重复并乘以整数而不是十进制数。因此，如果您的值是浮点数，比例或百分比，那么Chrome中就会出错。

我刚刚发现，经过2个小时试图找出铬间距不同的原因。

我还没找到一个解决办法，但要求尽可能多的人报告错误，以便他们解决问题。

Chrome背景尺寸不准确？

1 个答案: