Question

所以我想让我的内容成为填充整个“容器”的2列布局div。但我希望在窗口按比例放大或缩小时按比例调整“335px X 250px”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>

Answer 1

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

希望有所帮助。

Answer 2

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

Answer 3

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

因此，为了确定与视口的宽度和高度完全成比例的大小，您需要视口相对单位：vw和vh。请注意，browser support只是最新的A级浏览器，但如果您的用例可以处理它，那么它们就是完美的选择。以与%单位相同的方式使用它们，只知道它们不是相对于容器而是相对于窗口。因此，如果您希望某些内容始终是窗口/视口大小的一半，则在两个轴上都会调整大小：

height: 50vh;
width: 50vw;

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

3 个答案: