크롬 배경 크기가 정확하지 않습니까?

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

출처

2017-04-03 user1615837

최종보기는 어떻게 생겼습니까? –

당신의 오버레이 이미지는 정사각형입니다 (500x500). 그래서 제가 제안하는 것은 너비/높이를 정사각형 (예 : #vsb-screen-preview {width : 400px; height : 400px})과 같은 사각형을 사용하는 것입니다 크롬과 같은 크롬의 경우 배경을이 방법으로 만 렌더링합니다. –

@reenleedr 자바 스크립트로 값을 수정하면서 최종 뷰가 동적입니다. – user1615837

그 이유는 크롬 버그입니다. 배경 크기를 설정하면 십진수가 아닌 정수로만 반복되고 곱 해집니다. 따라서 값이 부동 소수점, 비율 또는 백분율 인 경우 Chrome에서 잘못됩니다.

나는 크롬 간격이 다른 이유를 알아 내려고 2 시간 만에 발견했다.

가능한 한 많은 사람들에게 버그를보고하여 버그를 수정하도록 요청했습니다.

출처

2017-06-03 22:06:05

크롬 배경 크기가 정확하지 않습니까?

답변

관련 문제