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'});

初始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 max ...
我用变换：scale（0.7）;但问题是，值必须动态地基于div.wrapper的高度...而且我有卡住的地方......我试过Zoomooz.js，但只放大了它不会缩放内容以适合我的div.wrapper ......任何帮助都会非常感谢...
**更新

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

Answer 1

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

width:100vw;

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

动态缩放/缩放div内容

1 个答案: