javascript - 动态缩放/缩放 div 内容

Question

我尝试了 css transform、zoom、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'});

初始 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%，图像高度最大为 60px...
我有使用 transform: scale(0.7);但问题是该值必须动态地基于 div.wrapper 的高度......而且我被卡住了......我已经尝试过 Zoomooz.js，但它只会放大并且它不会'不缩放内容以适合我的 div.wrapper ...任何帮助将不胜感激...
** 更新

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

Answer 1

您可以使用 vw 或 vh 使您的页面响应。例如:

width:100vw;

这会根据浏览器的宽度最大化宽度。 Vh 根据浏览器的高度更改属性。