Flexbox 图像大小调整答案

【问题标题】：Flexbox image resizeFlexbox 图像大小调整
【发布时间】：2016-05-28 08:11:21
【问题描述】：

我是使用 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%; }

【问题讨论】：

标签： html css responsive-design flexbox

【解决方案1】：

试试这个调整：

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

【讨论】：

感谢@Michael_B 但不行。我在之前的迭代中就有了，但是调整大小只会导致页面发疯
我在您的网页上对其进行了测试，效果很好。如果您可以在演示中重现该问题（例如 jsfiddle.net），那可能会很有用。
调整大小确实有效，但是如果您在调整大小时仔细观察，图像底部不会对齐。我正在与一些非常特别的艺术家打交道，他们必须完美地对齐......任何其他想法。我可以尝试在小提琴中重新创建
我确实看到了。它比相邻的列略短。第一列也较短。 img 的父级不接受任何 height 声明。似乎有一些 JS 或另一个覆盖 height 的滑块脚本。
经过一些调整，我能够让它工作。我所做的是为每个底部投资组合添加精确的宽度百分比。感谢您慢跑了一些我以前没有想到的东西。

【解决方案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%; }

【讨论】：

【解决方案3】：

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

比如：

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

这应该可以使图像无限放大，但只会缩小到 200 像素。

【讨论】：