全页/全屏 FLEXBOX 布局

Question

我目前正在使用 flexbox 方法来实现我想要实现的布局。我已经阅读了文档，并且在最近的一个项目中也一直在使用它。但是我正在苦苦挣扎（我不确定这个常见问题是否存在，或者我是否没有合适的解决方案）。正如标题所述，我正在尝试实现一个完整的页面布局，其中包含 8 个与屏幕等比例的 div（2 行 4 div 或 4 列 2 div）。

我已经在一定程度上做到了这一点，但真正的问题是放置在 div 本身内的图像。如果我使用 'vh' 和 'vw' 单位来调整图像/div 的大小，当浏览器调整大小时，它们会与窗口保持成比例，但图像确实是歪斜和压扁的。

如果我没有说明 vh/vw 单位并使用 % 代替，图像会保持正确的大小，但 div 会变小。

我正在尝试实现全屏布局，其中 8 个 div 和图像在垂直或水平调整大小时始终与窗口成比例。

这是我的视图文件；

这是我的html；

<div id="section-two" class="section-wrapper">
    <div class="parent-container">
        <div class="child">
            <img class="feature-image" ng-src="/assets/01_RETAIL_DESIGN.jpg" />
        </div>
        <div class="child">
            <img class="feature-image" ng-src="/assets/02_BRANDING.jpg" />
        </div>
        <div class="child">
            <img class="feature-image" ng-src="/assets/03_STRATEGIC_INSIGHTS.jpg" />
        </div>
        <div class="child">
            <img class="feature-image" ng-src="/assets/04_COMMERCIAL_MASTERPLANNING.jpg" />
        </div>
        <div class="child">
            <img class="feature-image" ng-src="/assets/05_URBANREGENERATION.jpg" />
        </div>
        <div class="child">
            <img class="feature-image" ng-src="/assets/06_FOODANDBEVERAGE_DESIGN.jpg" />
        </div>
        <div class="child">
            <img class="feature-image" ng-src="/assets/07_TRANSPORT.jpg" />
        </div>
        <div class="child">
            <img class="feature-image" ng-src="/assets/08_SIGNAGEANDWAYFINDING.jpg" />
        </div>
    </div>
</div>

这是我的css；

.section-wrapper {
    height: 100vh;
    width: 100vw;
    border: 1px solid black;
}
.parent-container {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    font-size: 0;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0; 
}
.child {
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    height: 50%;
    width: calc(100% * (1/4));
    position: relative;
}
.feature-image {
    height: 50vh;
}

非常感谢。

Answer 1

您根本不应该调整图像的大小。这就是网格的用途。我会在每个网格框中放置一个绝对定位的元素（以保持您的图像样式分开）并将图像设置为它们的背景。像这样的：

.child {位置：相对；} .img 包装器 { 位置：绝对； 顶部：0； 右：0； 底部：0； 左：0； 背景位置：中心中心； 背景尺寸：封面； }

<div class="child">
    <div class="img-wrapper" ng-style="{'background-image': '/assets/blah.jpg'}" />
    </div>
</div>

出于安全原因，您可能需要使用$sce 并通过控制器函数返回背景样式规则。

Answer 2

我是编码新手，不知道如何使用您正在使用的方法定位您的代码，但如果您愿意，请尝试使用浮动或内联块来定位您的内容。他们都为我工作得很好，我认为你会成功的。要获得一个非常好的页面网格轮廓，请访问此处：http://learn.shayhowe.com/html-css/positioning-content/ 祝你好运！

~雅各布