title: transform scale content and save width container
body: <p>I try to produce the same effect of the browser zoom to a div in my page,
  This div contains several thumbnails with a float left on each thumbnail,
  My zoom works very well on chrome and opera exactly as I want, but on firefox and IE : if zoom out it makes white space and if zoom in it creates scrolls.
  Can anyone help me please.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#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' });
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.panel{
   float:left;
   margin-right:20px;
   width:150px;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;div class="row"&gt;
    &lt;div class="col-md-12"&gt;
      &lt;button type="button" class="btn btn-primary" id="zoom-in"&gt;zoom in&lt;/button&gt;
      &lt;button type="button" class="btn btn-primary" id="zoom-out"&gt;zoom out&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;hr&gt;
  &lt;div class="row zoom" style="margin-top:20px;"&gt;
    &lt;div class="col-md-12"&gt;
   &lt;div class="panel panel-default"&gt;
       &lt;div class="panel-body"&gt;lorum ipsum dolor sit amet lorum ipsum dolor sit amet lorum ipsum&lt;/div&gt;
     &lt;/div&gt;
  
      &lt;div class="panel panel-default"&gt;
       &lt;div class="panel-body"&gt;lorum ipsum dolor sit amet lorum ipsum dolor sit amet lorum ipsum&lt;/div&gt;
     &lt;/div&gt;
      &lt;div class="panel panel-default"&gt;
       &lt;div class="panel-body"&gt;lorum ipsum dolor sit amet lorum ipsum dolor sit amet lorum ipsum&lt;/div&gt;
     &lt;/div&gt;
      &lt;div class="panel panel-default"&gt;
       &lt;div class="panel-body"&gt;lorum ipsum dolor sit amet lorum ipsum dolor sit amet lorum ipsum&lt;/div&gt;
     &lt;/div&gt;
      &lt;div class="panel panel-default"&gt;
       &lt;div class="panel-body"&gt;lorum ipsum dolor sit amet lorum ipsum dolor sit amet lorum ipsum&lt;/div&gt;
     &lt;/div&gt;
      &lt;div class="panel panel-default"&gt;
       &lt;div class="panel-body"&gt;lorum ipsum dolor sit amet lorum ipsum dolor sit amet lorum ipsum&lt;/div&gt;
     &lt;/div&gt;
  
       
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>