DIV 규모는 가로 세로 비율을 유지하는

Question

을 내가 레이아웃과 같이 있습니다

HTML

<div id="container"> 
    <div id="zoomBox"> 
     <div class="box"></div> 
     <div class="box"></div> 
     <div class="box"></div> 
    </div> 
</div> 

CSS

#container { width:100%; } 
#box { height:1000px;width:920px; } 

는 내가 뭘하려고 오전 내 컨테이너를 확장하다 내용은 현재있는 가로 세로 비율을 유지하기 위해 사용됩니다. 지금은 transform: scale()을 사용하고 gr 먹지 만 Internet Explorer에서 작동하는 심각한 문제가 있습니다.

이것은 지금까지 제 코드입니다. 누구든지 IE에서이 작업을 멋지게 만들기위한 다른 제안이 있습니까?

function zoomProject(percent) 
{ 
    $maxWidth = $("#container").width(); 

    if(percent == 0) 
     percent = $maxWidth/920; 

    $("#zoomBox").css({ 
     'transform': 'scale(' + percent + ')', 
     '-moz-transform': 'scale(' + percent + ')', 
     '-webkit-transform': 'scale(' + percent + ')', 
     '-ms-transform': 'scale(' + percent + ')' 
    }); 
} 

Answer 1

jquery를 설정하지 않았지만 원시 html과 javascript를 사용하여 예제를 설정했습니다. 그것은 probaly가 IE에서 실행되지 않습니다 (예 : 즉, 일부 구문을 사용하지 않지만 동일한 기능을 사용합니다)하지만 일단 jquery로 전환해야합니다.

코드 :

function zoomProject(ratio) { 
    var i, height; 
    var boxes = document.getElementsByClassName("box"); 

    for (i=0;i<boxes.length;i++) { 
    height = (boxes[i].offsetWidth * ratio) + "px"; 
    boxes[i].style.height = height; 
    } 
} 

zoomProject(.1); 

.container { background: red; width: 100%; height: 100%; } 
.box { background: blue; width: 100%; border: 1px solid white;} 

Answer 2

이없이 변환 해보십시오 :

이

new_width = width * percent/100; 
new_height = height * percent/100; 
$("#zoomBox").css('width',new_width); 
$("#zoomBox").css('height',new_height);