Resize an image based on the size of the DIV it is in with CSS?

Question

Below is an image of a blog I am working on. I need help with some CSS though. In the top image you can see what happens to my avatar when the text body to the right of it is larger then the image.

The bottom image is how I want it to look.

My problem is there are multiple authors, so the body text to the right can be of different lengths depending on the author. I would like to somehow have the image re-size itself to always fit into the div and look like it does in the bottom image.

Hopefully that all made sense, if anyone knows how to do this I would appreciate any help

I also put some example code up here to see it live http://dabblet.com/gist/2050005

Answer 1

Force the image to a specific size, regardless of the size of the original.

css:

.size-image img {
width: 200px;
height: 200px;
}

Size being whatever size you need/want to fill. In the html just add the class to the img element.

<img src="path/to/image" class="size-image" />

Then any image put into that element, whether by jquery, php or whatever, the element is sized to specifically what you need/want.

You can also put the image in it's own container, say "left-container" and have the width of the left container a specific width with an auto height, only put the <img> tag in the left container and the text in the "right-container"

Hope this helps

Answer 2

This will work for you ..

Use css for setting

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