Make an image to fit its parent dimensions

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!

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.

Use this bit of css to scale your image:

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

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

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

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.

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.

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)

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%;
}

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