图片在 Chrome 中未调整大小，但在 Firefox 中正确调整

Question

我有一行图像在 Firefox 中可以正确调整大小，但在 Chrome 中根本没有调整大小。这些图片需要排成一排，不能相互折叠。

有什么建议吗？

.image-rail {
    display: flex;
    justify-content: center;
    width: 100%;
}

.image-rail img {
    height: auto;
    width: 100%;
}

<div class="image-rail">

        <img src="https://pngimg.com/uploads/square/square_PNG14.png" alt="">

        <img src="https://pngimg.com/uploads/square/square_PNG14.png" alt="">

        <img src="https://pngimg.com/uploads/square/square_PNG14.png" alt="">

        <img src="https://pngimg.com/uploads/square/square_PNG14.png" alt="">

</div>

Answer 1

试试这个：

.image-rail {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%;
}

.image-rail img {
    height: auto;
    width: 100%;
}

或将flex-wrap: no-wrap添加到.image-rail

Answer 2

您已将 image-rail 设置为 display:flex；因此，这意味着该 flex 中的子元素可以设置为创建“列”的宽度。您的图像是 flexbox 的直接子代。所以如果你想让它们中的 4 个并排放置，它们都需要是 flexbox 总宽度的 1/4，也就是 25%。

（现在您已经设置了 100%，如果您使用了 div，那么每个 div 都会是整行，但是因为它是图像浏览器看到 100%，但图像比整行小，因此将其设置为 100%，就像图像包含的所有像素一样。）

.image-rail {
    display: flex;
    justify-content: center;
    width: 100%;
}

.image-rail img {
    height: auto;
    width: 25%;
}

<div class="image-rail">

        <img src="https://pngimg.com/uploads/square/square_PNG14.png" alt="">

        <img src="https://pngimg.com/uploads/square/square_PNG14.png" alt="">

        <img src="https://pngimg.com/uploads/square/square_PNG14.png" alt="">

        <img src="https://pngimg.com/uploads/square/square_PNG14.png" alt="">

</div>

编辑：不使用固定宽度，而是根据元素数量

如果你想让你的 flexbox 的所有 children 都放在一行中，但你不确定会有多少 children，那么你最好使用一个 gridbox 而不是 flexbox。

.image-rail {
    display: grid;
    grid-auto-flow: column;
    width: 100%;
}

.image-rail img {
    height: auto;
    width: 100%;
}

<div class="image-rail">
        <img src="https://pngimg.com/uploads/square/square_PNG14.png" alt="">
        <img src="https://pngimg.com/uploads/square/square_PNG14.png" alt="">
        <img src="https://pngimg.com/uploads/square/square_PNG14.png" alt="">
        <img src="https://pngimg.com/uploads/square/square_PNG14.png" alt="">
</div>

图片在 Chrome 中未调整大小，但在 Firefox 中正确调整

Images not resizing in Chrome, but correctly do in Firefox

html

css

image

flexbox