Html 按比例缩放div#包装内的四列（保持纵横比），以响应视口

在这个项目中，我在我的身体里有一个大div（也在main里面，只是出于css的原因），它包含八个小div（四列并排）。DIV通过

显示：内联块并排排列。大div的宽度为100%，小div的宽度不同，应自动填充父div的100%。四列中的两列由一个高度为100%的div组成；两列中有两个div，一个低于另一个，每个div的高度为50%

我真的被困在如何让这四个div具有单独的宽度上（这样它们可以保持内部图像的透视）

页面不应滚动，所有内容应始终可见

我在图像中发现了类似的行为，但我的div#wrapper无法使用这种行为。
（）

这里有一个指向JSFIDLE的链接：

以下是我的HTML代码：

<main>
    <div id="wrapper">
        <div id="one">
            <figure id="one">
                <img src="01.png" alt="01">
            </figure>
        </div>
           <div id="two">
            <figure id="02">
                <img src="02.png" alt="02">
            </figure>
            <figure id="03">
              <a href="03.html"><img src="03.png" alt="03"></a>
            </figure>
        </div>
           <div id="three">
            <figure id="04">
              <a href="04.html"><img src="04.png" alt="04"></a>
            </figure>
            <figure id="05">
              <a href="05.html"><img src="05.png" alt="05"></a>
            </figure>
        </div>
           <div id="four">
            <figure id="06">
              <a href="06.html"><img src="06.png" alt="06"></a>
            </figure>
        </div>
    </div>
</main>

这个jsfiddle完全符合我的要求

可能有帮助的是：

vertical-align:middle;

及

如果有什么需要改进的地方，也许有人可以检查一下

也许有人能解释得更深一点。老实说，我是通过反复试验才弄明白的

这些问题/答案有点帮助：



编辑1：跨浏览器兼容性可能是一个问题，它似乎在Chrome和Safari中起作用

编辑2：与Chrome和Safari相比，Firefox在解释和做一些不同的事情

编辑3：在Firefox div中，包装器未居中。可以使用以下CSS将div居中

@-moz-document url-prefix() {
    main {
        text-align:center;
    }
}

当屏幕缩小时，您无法保持纵横比，因为您已将
宽度
和
高度
都设置为100%。为了响应，但保持纵横比仅将
宽度设置为100%，不指定高度（浏览器将保持纵横比），谢谢您的回答！如果我的图像有很大的高度（例如，因为它们是高分辨率或类似的东西），那么这就不起作用。还有一个问题，不是每个内部div都有与其内容成比例的宽度。使用容器div定义区域是一个很好的起点。看见不想重写..谢谢你的链接！虽然我不明白，我如何用这个来解决上面描述的一般问题。你可以为像我这样的布局的每个特殊用途找到一个解决方案，但这并不是我在这里想要找到的。
position:relative;
top:50%;
transform:translate(-50%,-50%);

@-moz-document url-prefix() {
    main {
        text-align:center;
    }
}