Question

我是使用flexbox的新手，我正在尝试创建一个具有多种不同宽度，高度和幻灯片的投资组合页面。在调整页面大小时，我似乎无法让图像保持相同的高度。投资组合底部的幻灯片/最大图像的高度不断下降。无论屏幕大小如何，我都需要图像的高度保持相互成比例。只是想知道我在这里失踪了什么。我已经包含了URL，而不是标记并在jsfiddle中重新创建。

http://keaadvertising.com/new/kea-advertising-portfolio.php

    /* Portfolio */
.portfolio { margin: 0 auto; overflow: hidden; padding: 1.5em .5em; 
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}
.portfolio li {
    padding: 0 .5em;
}
.portfolio li img { height: auto; }
.bottomPortfolio { padding-top: 0; }
.portfolio li .splitPortfolio li { padding: 0; }
.portfolio li .splitPortfolio li:first-of-type { padding: 0 0 .7em; }
.bottomPortfolio .firstPortfolio { flex: 1 1 15% }
.bottomPortfolio .secondPortfolio {flex: 1 1 16%; }
.bottomPortfolio .thirdPortfolio { flex: 3 3 49%; }
.bottomPortfolio .fourthPortfolio { flex: 1 1 16%; }

Answer 1

尝试此调整：

.portfolio li img {
    height: auto;
    width: 100%;   /* NEW */
}

Answer 2

决定尝试每个底部投资组合的宽度，似乎有决心

.portfolio { margin: 0 auto; overflow: hidden; padding: 1.5em .5em; 
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}
.portfolio li {
    padding: 0 .25%
}
.portfolio li img { height: auto; width: 100%; }
.bottomPortfolio { padding-top: 0; }
.portfolio li .splitPortfolio li { padding: 0; }
.portfolio li .splitPortfolio li:first-of-type { padding: 0 0 .7em; }
.bottomPortfolio .firstPortfolio { width: 16.08%; }
.bottomPortfolio .secondPortfolio { width: 16.78%; }
.bottomPortfolio .thirdPortfolio { width: 50.82%; }
.bottomPortfolio .fourthPortfolio { width: 16.2%; }

Answer 3

尝试添加最小高度，以确保图像的高度不会超过某个值。

类似于：

.potfolio li img {
  height: auto;
  min-height: 200px;
}

这应该使图像无限大小，但只能缩小到200px。

Flexbox图像调整大小

3 个答案: