Масштаб контента/масштабирования ДИВ динамически

Question

У меня есть попробовать CSS преобразования, масштабирование, JQuery ... около 10+ демки и библиотеки для увеличения/масштаб контента большинство из них для изображений ...

Начальные JS

var hew = $(window).height(); 
var hes = hew - 100; // 100 is the total height of .margins-heads 
$(".wrapper").css({height: hes, overflow: 'hidden'}); 

Initial HTML

<div class="container"> 
    <div class="row clearfix margins-heads"> 
    <div class="col-sm-3">Some logo</div> 
    <div class="col-sm-9">Menu...</div> 
    </div> 
    <div class="row clearfix"> 
    <div class="col-sm-3">Side navigation</div> 
    <div class="col-sm-9"> 
     <div class="center-content"> 
       <div class="wrapper"> 
        <div>Content single img and name</div> 
        <div>about a hundred of this div's...</div> 
        <div>You get the picture...</div> 
       </div> 
     </div> 
    </div> 
    </div> 
</div> 

так обычно высота .wrapper собирается быть 548px, если у вас есть огромный монитор это может б высота 700px ... Дело в том, что все внутри .wrapper необходимо масштабировать, чтобы в нем вписаться, теперь каждый элемент внутри имеет ширину 10% с высотой изображения 60 пикселей max ...
У меня есть преобразование преобразования : шкала (0,7); но дело в том, что значение должно быть динамически основано на высоте div.wrapper ... и там, где я застрял ... Я попробовал Zoomooz.js, но это только увеличивает масштаб, и это не так, т масштабировать содержание, чтобы соответствовать моим div.wrapper ... любая помощь будет принята с благодарностью ...
** Обновление

https://fiddle.jshell.net/4ww87obb/1/

Answer 1

Вы можете использовать фольксваген или VH, чтобы сделать вашу страницу отзывчивым. Пример:

width:100vw; 

это максимизирует ширину в зависимости от ширины вашего браузера. Vh изменяет атрибут в зависимости от высоты вашего браузера.