How to resize the image and fit into container (div) in css

Question

I have different size background images in width and height (800x1200 600x800). I want to resize the image to full size without distortion to fit into the div. Can anybody tell me how to implement this in css. I have tried below ways but it is not occupying the full div width. can anybody tell me how to do this?

.example1 {
    border: 2px solid black;
    padding: 0;
    background: url(mountain.jpg);
    background-repeat: no-repeat;
    background-size: contain;
}

Possible duplicate of [Stretch and scale a CSS image in the background - with CSS only](https://stackoverflow.com/questions/1150163/stretch-and-scale-a-css-image-in-the-background-with-css-only) — giorgio, May 15 '18 at 09:33

score 3 · Answer 1 · answered May 15 '18 at 09:34

background-size: contain; will always display the whole image (without cutting off anything), thereby leaving some space either vertically or horizontally.

On the other hand, background-size: cover; will fill the whole DIV in a way that the shorter side of the image corresponds exactly to the length or height of the DIV (depending on the relation of the proportions between DIV and image) and the longer one is cut off on the sides or on top and bottom.

If you don't want a distorted image, those are the two options you have. If a distorted image doesn't disturb you, you can set background-size: 100% 100%;

score 0 · Answer 2 · answered May 15 '18 at 09:31

0

Try below code and check

 .example1 {
    border: 2px solid black;
    padding: 0;
    background: url(mountain.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

answered May 15 '18 at 09:31

PPL

6,357
1
11
30

it will distorted the image – user386430 May 15 '18 at 09:33

score 0 · Answer 3 · answered May 15 '18 at 11:26

Hi i know the best way to do this without compromising with quality of image.

just give position:relative; to that div for which you have to make backgorund.

and take the desire image into the div and give the image position:absolute; height:100%; width:100%;top:0; left:0; boject-fit:cover;and lastly give your image z-index:-1; I hope it will work.

How to resize the image and fit into container (div) in css

3 Answers3