CODEWITHSUNDEEP
htmlcssresponsive-designbackground-image
rawan mansour
rawan mansour

Reputation: 79

Resize Background Image without affecting the proportion

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;

Upvotes: 0

Views: 66

Answers (3)

Mehrzad Tejareh
Mehrzad Tejareh

Reputation: 633

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.

Upvotes: 0

Gautam
Gautam

Reputation: 81

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.

Upvotes: 1

Johannes
Johannes

Reputation: 67748

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.

Upvotes: 0

Related Questions