Expand Image Inside DIV

Question

How can I enlarge the image to the same size as the div after resizing? Or how can I fill the space to the left of the image with color?

Answer 1

I think this will bring you the desired result:

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

Now the image will be filled to the height of the container and scale its width with its aspect ratio. This can cause the image to expand beyond the borders of the width of the div container, so be careful.

Answer 2

There is a way to do this in CSS3:

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

The background-size property is supported only in newer versions of Safari and Opera. For other browsers, you can fill in the spaces around the image with color using the background-color property, for example:

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

Or in abbreviated form:

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

Using this code will stretch the image in browsers with CSS3 support (the latest Opera, Safari, and possibly Firefox). Older browsers and IE will have spaces around the image filled with the specified background color.

Answer 3

Set the background color for the div container