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.