73

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!

3
  • 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%} Jul 30, 2021 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, 2021 at 15:02

8 Answers 8

104

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.

2
  • alright! This one works! If you want to keep the aspect ratio, you should also use the max-height. Thanks
    – kfirba
    Mar 8, 2013 at 14:22
  • 3
    @kfirba i tried that, but it's taking the aspect ratio of the container, and not the image itself Dec 19, 2016 at 23:07
17

Use this bit of css to scale your image:

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

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

img {
    width:100%;
    height:100%;
}
3
  • 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 8, 2013 at 14:12
  • Hmm it then depends on your image container... Try sharing a fiddle with some of the tips ;).
    – soyuka
    Mar 8, 2013 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, 2017 at 19:01
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.

4

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.

1
  • 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. Jul 17, 2021 at 5:08
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)

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%;
}
-1
width: inherit;
height: inherit;
object-fit: contain;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.