title: Scale/zoom div content dynamically
body: <p>I have try css transform, zoom, jquery... about 10+ demos and libraries to zoom/scale content most of them are for images...<br></p>
  
  <p>Initial js<br></p>
  
  <pre><code>var hew = $(window).height();
  var hes = hew - 100; // 100 is the total height of .margins-heads
  $(".wrapper").css({height: hes, overflow: 'hidden'});
  </code></pre>
  
  <p>Initial html<br></p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row clearfix margins-heads"&gt;
       &lt;div class="col-sm-3"&gt;Some logo&lt;/div&gt;
       &lt;div class="col-sm-9"&gt;Menu...&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row clearfix"&gt;
       &lt;div class="col-sm-3"&gt;Side navigation&lt;/div&gt;
       &lt;div class="col-sm-9"&gt;
           &lt;div class="center-content"&gt;
                &lt;div class="wrapper"&gt;
                    &lt;div&gt;Content single img and name&lt;/div&gt;
                    &lt;div&gt;about a hundred of this div's...&lt;/div&gt;
                    &lt;div&gt;You get the picture...&lt;/div&gt;
                &lt;/div&gt;
           &lt;/div&gt;
       &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>so usually the height for .wrapper is gonna be 548px unless you have a huge monitor it could be 700px height... the point is that everything inside .wrapper has to be scaled to fit in there, now, every element inside has a width of 10% with the image height of 60px max...<br>
  I have use transform: scale(0.7); but the thing is that the value has to be dynamically base on the height of the div.wrapper ... and there is where I'm stuck... I have try Zoomooz.js, but that only zooms in and it doesn't scale the content to fit my div.wrapper ... any help would greatly appreciated...
  <br>
  ** Update</p>
  
  <p><a href="https://fiddle.jshell.net/4ww87obb/1/" rel="nofollow">https://fiddle.jshell.net/4ww87obb/1/</a></p>