How can I make an image fit inside a div element when the image is wider than the div?

Question

Hello,

I've an image tag inside a div element.

<div id = "myDiv">
 <img alt = "myImage" src = "some_source"/>
</div>

The image is bigger than the div, so the image is not inside the div element. First, I've thought about using width = x, height = y. But as I'm still designing the page, I fear to have to worry all the time those 2 dimensions.

How can I keep the image inside the div element? also, respecting the dimensions of the div element?

Thanks for helping

Answer 1

From here: Three ways to resize images to fit a DIV

Using the STYLE attribute within the IMG tag to manually set the width or height for each image (essentially the same as #1).

<div id="img_box">
<img style="width: 100%;" src="path/to/horizontal_image.jpg" />
</div>
<div id="img_box">
<img style="height: 100%;" src="path/to/vertical_image.jpg" />
</div>

Hope it solves your problem.

Edit: Best solution is to actually resize the image with server-side script. Scaling images in the browser does not usually work out very well.

Edit2: http://unstoppablerobotninja.com/entry/fluid-images