Question

我目前正在使用flexbox方法进行我想要实现的布局。我已经阅读了文档，并且在最近的项目中也一直在玩它。然而，我正在努力（我不确定这个常见问题，或者我是否有一个不错的解决方案）。正如标题所述，我试图实现一个完整的页面布局，其中包含8个与屏幕平分的div（2行4个div或4个2个div）。

我已经做到了这一点，但真正的问题是放在div本身内的图像。如果我使用＆＃39; vh＆＃39;和＆＃39; vw＆＃39;单位调整图像/ 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 {position：relative;} .img-wrapper { 位置：绝对; 顶部：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/祝您好运！

〜雅各

整页/屏幕FLEXBOX布局

2 个答案: