배경 이미지 지원

Question

이미지의 일부를 잃지 않고 광고 게시판 이미지를 약 2200px 965px 크기로 화면의 너비를 확장하고 높이를 500px로 조정하려고합니다. 이것이 가능합니까,이 작업을 완료하는 데 문제가 있습니다.

<div class="billboard"> </div> 

CSS :

height: 500px; 
background-repeat: no-repeat; 
background-attachment: fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
width: 100%; 
display:block; 
width:100%; 

Answer 1

예, 단순히 모든 잘려되지 않는지 확인하기 위해 CSS 코드에 width: 1140px를 추가합니다.

Answer 2

원하는 경우 배경 이미지가 잘리지 않고 추한 출력을 생성합니다.

참고 : JSfiddle : 내가 사용 이미지는 (965px에 의해 2200px) 제공으로 정확히 같은 크기 여기

.billboard { 
 
    height: 500px; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    -webkit-background-size: 100% 500px; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: 100% 500px; 
 
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/0/0a/Transjorund_Oulu_2007_05_20.JPG); 
 
    width: 100%; 
 
    display: block; 
 
}

<div class="billboard">ABV</div>

스 니펫이 작동하지 않는 경우가 있습니다