2009-12-05 3 views
0

큰 사진이 배경 인 웹 사이트를 만들려고합니다. 사용자의 창 크기에 따라 다른 크기의 그림을로드 할 수 있기를 원합니다. 그래서 (빈번하게) 빈 공간이 보이지 않습니다. JavaScript를 사용하여 현재 화면의 크기를 측정하고 싶습니다. 그런 다음 창의 크기에 따라 해당 해상도에 해당하는 이미지를로드하고 싶습니다.자바 스크립트를 사용하여 현재 창 측정하기

그러나 온라인에서 볼 때 모든 브라우저에서 창 크기를 가져 오는 표준 방법을 찾을 수 없었습니다. 어떤 도움이라도 대단히 감사합니다! 또한이를 구현하는 방법에 대한 다른 아이디어가 있으면 알려주십시오!

+0

동적 이미지의 크기를 동적으로 조정하는 멋진 방법의 예는 http://www2.goldmansachs.com/에서 확인하십시오. – philfreo

답변

4

사용자 창은 사용하는 동안 크기가 크게 달라지지 않습니다. 하나의 이미지 만 제공 한 다음 크기에 따라 이미지의 크기를 조정하는 것이 가장 좋습니다. 이는 CSS만으로도 달성 할 수 있습니다.

img#my-big-background-image { 
    width: 100%; 
} 
+1

+1 좋은 호칭입니다. 이것은 분명히 별개의 이미지를 가지고있는 것보다 나은 해결책입니다. Spolsky는 자신의 사이트 헤더에서이 작업을 수행합니다. –

2

jQuery를, YUI, 기타 자바 스크립트 프레임 워크는이 문제를 해결했다. 전체 프레임 워크를 연결하지 않으려는 경우에도 솔루션을 살펴보십시오.

2

사용 jQuery

var height = $(window).height(); 
var width = $(window).width(); 

모든 주요 브라우저에서 작동합니다.

+0

감사합니다. 나는 그것을 들여다 볼 것이다. –

+0

@ 존 J-P의 답변을 보시오, 나는 그것이 당신이 찾고있는 것이라고 생각합니다. –

0

내가 FF에 테스트 한이 링크 Here

에서 작성된 솔루션이 확인을 보인다.

+0

-1 링크 외에도 거의 정보가 없습니다 – Maslow

관련 문제