How to fit image based on div size in html

Question

How can I make an image fit a whole div (resizing the image if necessary)?

Question is duplicated: https://stackoverflow.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit-a-div-container — Pepv, Oct 09 '19 at 17:20
Possible duplicate of [How do I auto-resize an image to fit a 'div' container?](https://stackoverflow.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit-a-div-container) — Gal Silberman, Oct 09 '19 at 17:23

score 1 · Accepted Answer · edited Oct 09 '19 at 17:09

1

yes, You can use

  width: auto;
  height: 400px;
  object-fit: cover;

Instead of cover you can use contain, fill, etc as per your choice.

edited Oct 09 '19 at 17:09

j08691

204,283
31
260
272

answered Oct 09 '19 at 17:08

Rutvik Gumasana

1,458
11
42
66

1

Thank you, Exactly what i want! – dhaval Oct 09 '19 at 17:09

score 0 · Answer 2 · answered Oct 09 '19 at 17:10

You cannot always display with the same dimensions Because your container may be other sizes But the normal way is to set the height to 100% and hide it overflow Or vice versa width: 100%

or use object-fit: hover same as:

img { 
     width:100%; 
     height:100%; 
     object-fit:cover; 
}

score 0 · Answer 3 · answered Oct 09 '19 at 17:12

0

If you provide the height OR width of DIV in %, then the div will be expanded as per the size of the image but if you provide the width and height of the div in pixle "px" then the div will have fixed height and width.

answered Oct 09 '19 at 17:12

Anurag

843
1
9
16

How to fit image based on div size in html

3 Answers3