페이지가 너무 짧을 때 div의 배경 이미지가 위쪽과 아래쪽에서 잘림니다.

Question

CSS에서 새로운 기능이므로 매우 간단 할 수 있습니다. 나는이 질문에 대한 답을 찾기 위해 무리를 모색했지만 나는 아직 그것을 찾지 못했다. 페이지 크기에 따라 로고를 늘리고 크기를 조정하는 div가 필요합니다. 작업하는 데는 많은 시간이 걸리지 만 페이지가 너무 짧으면 배경 이미지의 위쪽과 아래쪽이 잘릴 수 있습니다. 여기에 사이트가있어 어떤 일이 일어나고 있는지 확인할 수 있습니다. 여기

chaptertwollc.com

그리고

는와 관계있는의 CSS입니다.

.centerLogo { 
    height: 50%; 
    width: 50%; 
    position: absolute; 
    top: 0px; 
    bottom: 0px; 
    left: 0px; 
    right: 0px; 
    text-align: center; 
    margin-top: auto; 
    margin-right: auto; 
    margin-bottom: auto; 
    margin-left: auto; 
    visibility: visible; 
    background-repeat: no-repeat; 
    background-image: url(../POP%20high%20res%20logo%20ellipse%20black%20glow%20webop.png); 
    background-size: 100%; 
    background-position: center center; 
    background-attachment: scroll; 
} 

편집 : 제대로 작동합니다. 그냥

-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 

Answer 1

크로스 브라우저 솔루션을 사용하려고, 내가 바로 당신을 이해한다면

background-size: contain; 

Answer 2

에

background-size: 100%; 

변경과 같은 단순하게이 Svoka 잘못된 CSS 값을 사용하다 ...

-webkit-background-size: contain; 
-moz-background-size: contain; 
-o-background-size: contain; 
background-size: contain; 

Contain는 화면 비율을 변경하지 않고 배경이 컨테이너에 맞는지 확인하기 위해 렌더링 엔진에 지시합니다.