转换比例内容并保存宽度容器

Question

我尝试将浏览器缩放的效果与我页面中的div相同， 这个div包含几个缩略图，每个缩略图上都有一个浮动， 我的缩放在chrome和opera上的效果非常好，但在firefox和IE上：如果缩小它会产生空白区域，如果放大它会创建滚动。 任何人都可以帮助我。

＆＃13;

＆＃13;

$('#zoom-in').click(function() {
   updateZoom(0.1);
});

$('#zoom-out').click(function() {
   updateZoom(-0.1);
});


zoomLevel = 1;

var updateZoom = function(zoom) {
   zoomLevel += zoom;
   $('.zoom').css({ zoom: zoomLevel, '-moz-transform': 'scale(' + zoomLevel + ')','-ms-transform': 'scale(' + zoomLevel + ')', 'transform-origin': 'top left' });
}

＆＃13;

.panel{
	float:left;
	margin-right:20px;
	width:150px;
	}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-12">
    <button type="button" class="btn btn-primary" id="zoom-in">zoom in</button>
    <button type="button" class="btn btn-primary" id="zoom-out">zoom out</button>
  </div>
</div>
<hr>
<div class="row zoom" style="margin-top:20px;">
  <div class="col-md-12">
	<div class="panel panel-default">
    	<div class="panel-body">lorum ipsum dolor sit amet lorum ipsum dolor sit amet lorum ipsum</div>
  	</div>

    <div class="panel panel-default">
    	<div class="panel-body">lorum ipsum dolor sit amet lorum ipsum dolor sit amet lorum ipsum</div>
  	</div>
    <div class="panel panel-default">
    	<div class="panel-body">lorum ipsum dolor sit amet lorum ipsum dolor sit amet lorum ipsum</div>
  	</div>
    <div class="panel panel-default">
    	<div class="panel-body">lorum ipsum dolor sit amet lorum ipsum dolor sit amet lorum ipsum</div>
  	</div>
    <div class="panel panel-default">
    	<div class="panel-body">lorum ipsum dolor sit amet lorum ipsum dolor sit amet lorum ipsum</div>
  	</div>
    <div class="panel panel-default">
    	<div class="panel-body">lorum ipsum dolor sit amet lorum ipsum dolor sit amet lorum ipsum</div>
  	</div>

    	
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;