constraining large IMG's

[antonyw]

hi everyone,

I'm looking for a tidy way to deal with images that are larger than the container that they are held within. So, for example -

<div class=mydiv><img src='toobig.jpg'></div>

where the div has a fixed width set in its CSS.

I find with the div that the img just breaks out of the right hand side. I was rather hoping that infact it would be clipped somehow with the div taking priority.

Any ideas?

thanks
tony

[kolin]

in what situation would you want to do this?

surely resizing the images to the containing div's dimensions and then linking to a larger version of the image would be a friendlier solution?

[whoisgregg]

You'll want to play around with the overflow property. Start with the code below and see if that does what you are looking for. :)

div.mydiv { overflow: hidden; }

[antonyw]

This is a user generated content scenario - posting images into a forum type thing...

> You'll want to play around with the overflow property

aha, yes indeed. Very nice. Thanks

[Xapti]

Well overflow:hidden will work in that it will CROP or cut off the overflowing part of your image.
Overflow:auto will keep the dimensions of the div, but it will have a little scrollbar (or two for both axises), so that the image will not be cropped.

Lastly, you should be able to have the image automatically resized to non-overflow. Just put max-width/max-height as 100%. The issue with this is that some browsers do not support it.