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 phot

Answer 1

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.

Answer 2

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

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

Answer 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.

Answer 4

Use this bit of css to scale your image:

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

Answer 5

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)

Answer 6

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