Make an image to fit its parent dimensions

Question

I have some photos which have big sizes, I would like to set them to the Parent's dimension size. If one time the parent dimension is 1200x800, I would like to set the photo dimensions to 1200x800, but also I would like to see the whole image. If my parent dimension is 500x300, I would like the image to be 500x300 and so on.

Is this even possible? I want to shrink the image or expand it according to it's parent's dimension.

Thanks!

Related: https://stackoverflow.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit-a-div-container — Ciro Santilli Путлер Капут 六四事, Apr 30 '21 at 09:25
many answers say to use `img {max-width: 100%}` but it won't work if the size of the parent is set using max-: `.parent{max-width: 50%}`. I must be without max-: `.parent{width: 50%}` — Ivan Ferrer Villa, Jul 30 '21 at 13:20
How to do it with a parent of `max-width`,`max-height` but no `width` or `height` because it **must**(!) be able to dynamically shrink if the contents is not big enough? — Tino, Oct 13 '21 at 15:02

soyuka · Accepted Answer · 2015-04-28T06:10:10.523

91

The css property that you want is max-width :

Css

img {
    max-width:100%;
}

You could add a container around your image and set overflow:hidden to prevent images to get bigger than the defined width/height.

edited Apr 28 '15 at 06:10

answered Mar 08 '13 at 14:04

soyuka

8,332
2
38
54

alright! This one works! If you want to keep the aspect ratio, you should also use the max-height. Thanks – kfirba Mar 08 '13 at 14:22
3

@kfirba i tried that, but it's taking the aspect ratio of the container, and not the image itself – Sam I am says Reinstate Monica Dec 19 '16 at 23:07

score 16 · Answer 2 · edited Feb 12 '16 at 12:12

16

Use this bit of css to scale your image:

img {
    max-width: 100%;
    max-height: 100%;
}

edited Feb 12 '16 at 12:12

John Slegers

41,615
22
193
161

answered Mar 08 '13 at 14:04

Morpheus

8,491
13
49
73

score 5 · Answer 3 · answered Mar 08 '13 at 14:04

5

I might be naive, but isn't this as simple as this ?

img {
    width:100%;
    height:100%;
}

answered Mar 08 '13 at 14:04

Jako

906
15
31

Well, does it matter if I add to this code also max-width and max-height? anyways, is this going to display the **whole** picture in the div? – kfirba Mar 08 '13 at 14:12
Hmm it then depends on your image container... Try sharing a fiddle with some of the tips ;). – soyuka Mar 08 '13 at 14:12
1

@kfirba actually yes, it does matter. Some browsers will not render the `max-` prefix values if no initial values have been set. it will ignore `max-width` if no `width` has been specified. This isn't so much just for images but for certain elements on certain browser types – Martin Apr 27 '17 at 19:01

score 3 · Answer 4 · edited Apr 27 '17 at 19:00

3

Try this in the image tag

<img src="url.jpg" width="100%" height="100%" />

Or set the backgound of the element as the image and do the same.

edited Apr 27 '17 at 19:00

Martin

20,858
7
60
113

answered Mar 08 '13 at 14:04

Adam Brown

2,752
4
27
38

score 3 · Answer 5 · answered Jul 16 '21 at 13:14

In general it might help to remember this:

1: A track is not a container.

2: A grid area is not a container.

3: A nested element is not a container unless you declare it as such.

Declarations such as max-width: 100%, object-fit: contain and so on describe how the element (e.g img) will behave inside its container - not inside the track or area it happens to have been placed in. And not inside the tag it lives in, nested inside its container. e.g after

HTML:

<div class="myContainer">
    <div class="myTopRow">
        <img src="myPic.jpg">
    </div>
    <div class="myBottomRow">
        <span class="mySubText">Your subtext here.</span>
    </div>
</div>

CSS:
.myContainer {
    display: grid;
    grid-template-rows:  [row1Start] 1fr [row1End row2Start] 1fr [row2End];
    grid-template-columns: [col1Start] 1fr [col1End];
}

.myTopRow {
    grid-rows: row1Start / row1End;
    grid-columns: col1Start / col1End;    
}

.myBottomRow {
    grid-rows: row2Start / row2End;
    grid-columns: col1Start / col2End;
}

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

you've made a grid consisting of one column and two rows. The image in the top row will seem to spill over into the second row, colliding with that row's spanned text. In reality there's no overflow - the image is not contained by the top row (which has not been declared as a container, but is "merely" an area spanning tracks). Within it's actual container (the whole two-row box) the image is perfectly contained.

Hello and welcome to stackoverflow, here is a suggestion to improve the post : you can add a language identifier to highlight the css and make it more readable. — I_love_vegetables, Jul 17 '21 at 05:08

Madzelos · Answer 6 · 2020-03-18T03:15:33.507

2

In the case the image is bigger than the parent container you have to set :

img {
    max-width: 100%;
}

If your image is smaller you have to set instead

img {
    min-width: 100%;
}

otherwise it will just stay at its original width and height.

(the Height is set to auto by default)

edited Mar 18 '20 at 03:15

answered Mar 17 '20 at 06:24

Madzelos

53
4

score 1 · Answer 7 · answered Mar 08 '13 at 14:05

1

try to use the max-width property, this might give a bug in earlier versions IE though

#custom img {
    max-width: 100%;
    max-height: 100%;
}

answered Mar 08 '13 at 14:05

Crowlix

1,249
9
19

score -1 · Answer 8 · answered Apr 13 '22 at 21:03

-1

width: inherit;
height: inherit;
object-fit: contain;

answered Apr 13 '22 at 21:03

Glaucius Zacher

39
3

Make an image to fit its parent dimensions

8 Answers8

Linked