图片不能在 Chrome 中调整大小，但在 Firefox 中可以正确调整答案

【问题标题】：Images not resizing in Chrome, but correctly do in Firefox图片不能在 Chrome 中调整大小，但在 Firefox 中可以正确调整
【发布时间】：2022-02-02 05:55:31
【问题描述】：

我有一排图像在 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>

【问题讨论】：

标签： html css image flexbox

【解决方案1】：

您已将 image-rail 设置为 display:flex;所以这意味着该flex内的childeren可以设置为创建“列”的宽度。您的图像是 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 的所有子元素排成一行，但你不确定会有多少子元素，那么你最好使用 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>

【讨论】：

谢谢，我当然忘记了弹性容器内的项目需要一个宽度才能以正确的方式工作。如果图像的图像轨道数量未知，有什么建议吗？我将有 1-4 张图片（希望不是一张），但您将如何计算，CSS 中有没有办法？
在我的第一个答案中，我尝试确保对您的代码进行尽可能少的更改。但是，自动调整列的大小当然也是一个有效的解决方案。我在答案中包含了这个选项和一个编辑。

【解决方案2】：

试试这个：

.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

【讨论】：

这在 Chrome 中仍然不起作用。我没有添加 flex-wrap: no-wrap 因为它是 flexbox 的默认设置。
我用 codepen.io 试过这个，它的作品，试试这个： .image-rail { display: flex;宽度：100%； } .image-rail img{ 宽度：25%; }