Images not resizing in Chrome, but correctly do in Firefox-CodePudding

I have a row of images that resize correctly in Firefox, but do not resize at all in Chrome. These images need to stay in a row and cannot fold under each other.

Any suggestions?

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

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

<div >

        <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>

CodePudding user response：

Try this one :

.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%;
}

or add flex-wrap: no-wrap to .image-rail

CodePudding user response：

You've set the image-rail to display:flex; So that means that the childeren inside that flex can be set with a width that creates the "columns". Your images are the direct childeren of the flexbox. So if you want 4 of them next to each other the all need to be 1/4 of the total width of the flexbox aka 25%.

(Right now you've set a 100% and if you've had used a div it would have been the whole row for each div, but as it is a image the browsers see the 100%, but the images is smaller then the whole row so it sets it to 100% as in all the pixels the image contains.)

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

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

<div >

        <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>