Resize Background Image without affecting the proportion

Question

I am trying to make a slider with background images, when I am trying to make it fit to the mobile screen, the proportion is affected and look as pixels, how can I resize the background-image to fit the mobile screen without affecting the proportion.

and when I increase the height to :

background-size: 100vw 55vh !important;
height: 55vh !important;

Answer 1

You can use the object-fit property to maintain the aspect ratio of the image:

img {
height: 55vh
object-fit: contain;
}

contain - The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box.

Answer 2

Instead of fixing both height and width of the image, just define the one which you need (for example width) and set the other one to auto . For height that would be:

background-size: auto 55vh;
height: 55vh;

that way the original image proportion will be kept, avoiding a distorted image.

Answer 3

you can use this CSS:

{
    background-size: contain;
    background-repeat: no-repeat;
}

if it didn't work please share your code. I know I can help you.