使用高度弹性框调整图像大小

Question

我有一列带有图像。该列的高度有限，我希望所有图像都垂直适合该列。这可能吗？我正在尝试使用弹性框，但还没有成功。

.zoom__images {
overflow: hidden;
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
img {
width: auto;
height: auto;
}

<div class="zoom__images">
<img src="https://s-media-cache-ak0.pinimg.com/736x/42/d4/66/42d466fd73a3b284f49d3020c27cf80e--aloes-martin-omalley.jpg" class="" alt="Simple Picture">
<img src="https://s-media-cache-ak0.pinimg.com/736x/42/d4/66/42d466fd73a3b284f49d3020c27cf80e--aloes-martin-omalley.jpg" class="" alt="Simple Picture">
<img src="https://s-media-cache-ak0.pinimg.com/736x/42/d4/66/42d466fd73a3b284f49d3020c27cf80e--aloes-martin-omalley.jpg" class="" alt="Simple Picture">
<img src="https://s-media-cache-ak0.pinimg.com/736x/42/d4/66/42d466fd73a3b284f49d3020c27cf80e--aloes-martin-omalley.jpg" class="" alt="Simple Picture">
</div>

愿你安好

Answer 1

如果您想

为图像拍摄相同的大小，这将起作用

要使弹性项目缩小到小于其大小，您需要设置flex-basis: 0;和min-height: 0。默认值min-height: auto和flex-basis: auto;可以防止弹性项目缩小到小于其大小。flex-grow: 1使物品增长到具有相等的价值。但是img，因为弹性项目不会调整大小以保持纵横比，因此我们必须包装它们。演示：

.zoom__images {
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
}
.zoom__images > * {
flex: 1 0 0;
min-height: 0;
display: flex;
}
.zoom__images img {
max-height: 100%;
margin-left: auto;
margin-right: auto;
}

<div class="zoom__images">
<div><img src="https://placehold.it/200x300/a00/fff"></div>
<div><img src="https://placehold.it/250x175/a00/fff"></div>
<div><img src="https://placehold.it/250x175/a00/fff"></div>
<div><img src="https://placehold.it/250x175/a00/fff"></div>
<div><img src="https://placehold.it/250x175/a00/fff"></div>
<div><img src="https://placehold.it/100x100/a00/fff"></div>
<div><img src="https://placehold.it/400x600/a00/fff"></div>
</div>

您还可以为未溢出.zoom__images的图像添加.zoom__images > *overflow: hidden。这不会让它看起来像其他浏览器一样，但看起来会好得多。

Answer 2

尝试使用 CSS calc((方法。 calc(100/容器中的图像数量(将调整图像高度的大小，以共享容器高度的 100%，该高度将在所有图像之间平均分配。

.zoom__images {
overflow: hidden;
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
img {
width: auto;
height: calc(100%/4);
}

<div class="zoom__images">
<img src="https://mrose.org/cc/png-test.png" class="" alt="Simple Picture">
<img src="https://mrose.org/cc/png-test.png" class="" alt="Simple Picture">
<img src="https://mrose.org/cc/png-test.png" class="" alt="Simple Picture">
<img src="https://mrose.org/cc/png-test.png" class="" alt="Simple Picture">
</div>