2013-04-11 1 views
0

CSS 높이를 사용하여 외부 컨테이너를 높이 또는 너비와 일치하도록 확대/축소합니다 (브라우저 윈도우 종횡비에 따라 다름). Google 크롬에서 완벽하게 작동합니다. CSS zoom 속성이 자동으로 모든 자식을 확대한다고 가정하기 때문에 '*'선택자를 사용할 필요조차 없습니다.CSS 줌 - Chrome에서 작동하는이 (jQuery) 스크립트 만받을 수 있습니다.

나는 내가 다른 브라우저에서 시도하지 않은 (그것은 비록 파이어 폭스 나 IE에서 작동하도록 얻이 수없는 것

내가 '변환 -moz-: 규모'를 시도했다. 파이어 폭스에서 ... 하지만. 중 하나 일 것으로

모든 얻을 모든 도움을 주시면 감사 없습니다. 감사합니다!

$(document).ready(function() { 

var videoAspect= 480/270;/* normalWidth/normalHeight*/ 

var $window = $(window), windowW= $window.width(), windowH= $window.height(); 
var windowAspect= windowW/windowH; 

if(windowAspect > videoAspect){ 
    /* need height of window divided by container height = zoom amount */ 
    $('#wrapper').css({'zoom': windowH/(270*2)}); 


    }else{ 
     /* need width of window divided by container zoom = zoom amount */ 
     $('#wrapper').css({'zoom': windowW/(480*2)}); 

     } 

    }); 

    $(window).resize(function() { 

     var videoAspect= 480/270;/* normalWidth/normalHeight*/ 

     var $win 

dow = $(window), windowW= $window.width(), windowH= $window.height(); 
    var windowAspect= windowW/windowH; 

    if(windowAspect > videoAspect){ 
     /* need height of window divided by container height = zoom amount */ 
     $('#wrapper').css({'zoom': windowH/(270*2)}); 

    }else{ 
     /* need width of window divided by container zoom = zoom amount */ 
     $('#wrapper').css({'zoom': windowW/(480*2)}); 


    } 

}); 

답변

2

줌 속성 (당신이 발견 한 것처럼) 모든 브라우저에서 지원되지 않습니다.를 추가도 시도 transform: scale(%) 속성.

각 브라우저마다 모든 변형을 포함해야합니다 (here is a good list of those variants).

관련 문제