如何在缩放浏览器时使div比例流畅？

所以我想让我的内容成为填充整个“容器”的2列布局div。但是当窗口放大或缩小时，我希望按比例调整“335px X 250px”div。以下是我希望它看起来像下面的图像的示例图像，我该怎么做？如何在缩放浏览器时使div比例流畅？

enter image description here

的的jsfiddle链接：https://jsfiddle.net/gdkvcnyj/15/

<body> 
    <div id="body-wrap"> 
     <div id="mobilenav"></div> 
     <div class="content-wrap"> 
      <div id="container"> 
       <div class="mix"></div> 
       <div class="mix"></div> 
       <div class="mix"></div> 
       <div class="mix"></div> 
       <div class="mix"></div> 
       <div class="mix"></div> 
       <div class="mix"></div> 
       <div class="mix"></div> 
       <div class="mix"></div> 
       <div class="mix"></div> 
       <div class="mix"></div> 
       <div class="mix"></div> 
       <div class="mix"></div> 
       <div class="mix"></div>   
      </div> 
     </div> 
    </div> <!-- end of Body Wrap --> 
</body>

来源

2015-05-29 billybobjones

是否更改了.mix元素使用百分比宽度，而不是绝对值。 jsfiddle here。

希望有所帮助。

来源

2015-05-29 08:25:42 Clay

事情是我想要的宽度和高度按比例缩放。不只是宽度。 – billybobjones

高度比宽度更复杂。您可以简单地将.mix元素的height属性设置为百分比，但这不适用于所有浏览器，而且如果添加更多内容则需要不断更改该值。我认为唯一的选择是使用JavaScript。已更新jsfiddle：[https://jsfiddle.net/claytonF/gdkvcnyj/26/] – Clay

好吧，我明白了。谢谢:) – billybobjones

而不是设置图像大小使用百分比，浏览器将相应地进行调整。与高度相同。

来源

2015-05-29 08:42:20 ETurns

请注意，%单位正比于div的容器，而不是视口。听起来你想要视口。

所以，对于大小完全成比例的宽度和视口的高度，你想要的视区相对单位：vw和vh。请注意，browser support只是最近的A级浏览器，但如果您的用例可以处理它，那么它们就是最好的选择。只要知道它们与容器相对，而不是相对于窗户，就可以像使用它们一样使用它们。所以，如果你想要的东西总是窗口/视口的大小的一半，在两个轴的大小：

height: 50vh; 
width: 50vw;

来源

2015-05-29 08:49:29 XML

嗯我明白了。谢谢你的时间！ – billybobjones

如何在缩放浏览器时使div比例流畅？

回答

相关问题