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

Set a background color for the container div

Answer 2

Why have a div at all?

Answer 3

Not sure what you are trying to do, could you clarify?

Answer 4

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.

Answer 5

There is a way to do this in CSS3:

div {background-image: url(path/to/image); background-size: 100%}

The background-size property is only supported in newer versions of Safari and Opera. For the other browsers, you can fill the whitespace left around the image with a color using the background-color property, like so:

div {
  background-image: url(path/to/image);
  background-size: 100%;
  background-color: #000000;
  }

Or, in shorthand:

div {background:#000000 url(path/to/image) no-repeat; background-size:100%}

Using this code will cause the image to stretch in CSS3 enabled browsers (newest Opera, Safari, and possibly Firefox). Older browsers and IE will have the whitespace around the image filled with the background color specified.