My current layout is structured like this:
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; }
I am currently using the transform: scale() property to preserve the aspect ratio of my container and its contents. However, I am facing compatibility issues with Internet Explorer. Any suggestions on how to make this work smoothly on IE?
This is a snippet of my JavaScript code for scaling:
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 + ')'
});
}