배경 이미지 스케일링

웹 사이트를 만들고 있는데 배경 이미지를 페이지와 함께 크기를 조정하고 항상 올바른 종횡비로 지정하고 싶습니다. background-size: cover 또는 contain의 문제는 가로 크기를 올바르게 조정하는 동안 배경 이미지보다 가로 세로 비율이 높은 브라우저가 있으면 세로로 바둑판 식으로 배열되기 시작한다는 것입니다.배경 이미지 스케일링

그래서 나는이 문제를 해결받을 수있는 jQuery를 함수를 작성 것이라고 생각하고, 나를 위해 잘 작동합니다 :

$(window).resize(resizeBg); 

function resizeBg(){ 
    var winWidth = window.innerWidth; 
    var winHeight = window.innerHeight; 
    var aspectRatio = winWidth/winHeight; 
    var imageRatio = 1920/1200; 
    if(aspectRatio < imageRatio) 
     $("body").css("background-size", "auto " + winHeight + "px"); 
    else 
     $("body").css("background-size", winWidth + "px auto"); 
} 
resizeBg();

하지만이 라이브를 넣어 전에 난 그냥 사람이 더 나은 방법을 알고 있다면 물어보고 싶은게 이 기능을 정리할 수있는 방법을 사용하십시오.

감사합니다.

출처

2014-04-03 Jamie Poole

이 작업을 수행하는 방법에는 몇 가지가 있습니다. 나는 전형적으로 CSS를 시도하고 고수한다. 여기에 단지 하나의 CSS 방법입니다.

HTML은 모든 다양한 방법을 살펴보고 장점과 단점 + 데모를 포함하는 csstricks.com 게시물에

<div id="bg"> 
    <img src="images/bg.jpg" alt=""> 
</div>

CSS

#bg { 
    position: fixed; 
    top: -50%; 
    left: -50%; 
    width: 200%; 
    height: 200%; 
} 

#bg img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: auto; 
    min-width: 50%; 
    min-height: 50%; 
}

. 나는이 문제를 탐구 할 때 유용하다는 것을 알았다. 항상 작동 링크 보장이 없기 때문에

http://css-tricks.com/perfect-full-page-background-image/

출처

2014-04-03 18:42:46 JayD

관련 코드 예제는 당신의 대답에 포함되어야한다. – Greg

동의하고 고치기 – JayD

고마워요. 위 코드를 사용하지는 않았지만 CSS3 방식은 대접을받습니다. 이 웹 사이트는 IE9 미만을 사용하지 않을 것이라고 확신 할 수있는 특정 인구 통계를위한 것입니다. 그래서 이것은 완벽합니다. 감사! –

background-size: auto;은 여기에서 잘 작동해야합니다. background-repeat: no-repeat; 및 background-position: center도 지정해야합니다. 희망이 도움이됩니다.

출처

2014-04-03 18:42:31

배경 이미지 스케일링

답변

관련 문제