Expand image inside DIV

Question

How can I expand an image to have the same height as the div after resizing? Or how can I fill the white space left by the image with a color?

Answer 1

I think this will get you your desired result:

<style>
    div {
    width:50px;
    height:100px;
    }

    div img {
    height:100%;
    }
</style>
<div>
    <img src='path/to/img.gif' />
</div>

The image will now fill to the container div's height and scale its width with its aspect ratio. This could cause the image to expand past the container div's intended width boundaries though so be careful.