76

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!

codejockie
  • 9,020
  • 4
  • 40
  • 46
kfirba
  • 5,231
  • 14
  • 41
  • 70
  • Related: https://stackoverflow.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit-a-div-container – Ciro Santilli OurBigBook.com Apr 30 '21 at 09:25
  • 2
    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
  • 2
    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

9 Answers9

114

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.

soyuka
  • 8,839
  • 3
  • 39
  • 54
18

Use this bit of css to scale your image:

img {
    max-width: 100%;
    max-height: 100%;
}
John Slegers
  • 45,213
  • 22
  • 199
  • 169
Morpheus
  • 8,829
  • 13
  • 51
  • 77
6

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

img {
    width:100%;
    height:100%;
}
Jako
  • 944
  • 14
  • 33
  • 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
5

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.

Neil Horne
  • 51
  • 1
  • 2
  • 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
4

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.

Martin
  • 22,212
  • 11
  • 70
  • 132
Adam Brown
  • 2,812
  • 4
  • 28
  • 39
3

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)

Madzelos
  • 73
  • 4
2

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%;
}
Crowlix
  • 1,269
  • 9
  • 19
0
width: inherit;
height: inherit;
object-fit: contain;
Glaucius Zacher
  • 49
  • 3
0

There are cases where one is dealing with a wide array of images sizes where some might need to be scaled horizontally, others vertically, and some both. When using max-[width|height] properties the shortest dimension won't completely scale. That means:

  • Images where width > height: there will be a vertical gap
  • Images where height > width: there will be a horizontal gap

To address this issue, one can essentially scale both to fit and the object-fit property will allow the aspect ratio to magically stay the same:

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

To control the sizing, use a wrapper element and style appropriately.

alphazwest
  • 3,483
  • 1
  • 27
  • 39