Change image size in CSS if div tag is smaller than the image

I run into the problem that I had a div tag with a certain width. From a external site I loaded some content in this div tag. The problem was that I did not have the control over the pictures loaded from this external server. Some pictures where bigger then the size of the div tag. I didn’t had the possibility to take the picture and make them smaller with PHP as the source of the picture had to be on the external server. And furthermore, I needed a solution in CSS or Javascript and couldn’t use something like phpThumb.

My solution was to use this:

#parent{
width:50px;
}
#parent img{
max-width:100%;
height:auto;
}
<div id="parent">
	<img src="http://www.michaelfretz.com/wp-content/uploads/2009/10/IMG_1794.jpg" alt="Los Angeles" />
</div>

This way of handling this problem doesn’t make the file size smaller but it changes the appearance of the image to the width of the div tag. It might not be the best way to do it but it’s a quick and dirty way which might help you.

The final result of this script is a picture, which is only 50px wide instead of 580px.
The only disadvantage is that the file size of the image is still the same.

Download the Source Files