object-fit:cover resizes img width-CodePudding

I'm trying to make a carousel slide, but when I'm using object-fit:cover and adding the second image the first and the second image width are changing from 100% to 50%

on 1 input it works fine See photo here

on second input it's changing its width See photo2 here

CodePudding user response：

I think the object-fit:cover property can be set with the width property.

image {
    width: 100%;
    object-fit: cover;
}

Then the image places appropriately so that it's width is 100%.

CodePudding user response：

If you really want img to be 100% in flex layout you can use one of these options:

img {
    width: 100%;
    flex-shrink: 0;
}

img {
    min-width: 100%;
}

If smth else - update/improve your question