Click to See Complete Forum and Search --> : Image that will adjust its size relative to its container


Bulletproof
10-09-2008, 02:39 AM
I'm looking for a way that will resize an image so that it will always fit inside of its container (without javascript). For example: <span><img src="someimage.jpg" style="height: 100%;"/>Testing</span> The height setting fills the entire screen with the image and not what the actual span would take up with just the text. If there were a setting to set a background image to stretch instead of tile that would work great.

gil davis
10-09-2008, 08:36 AM
As of present, there are no CSS properties that will change the dimensions of a background-image, only its position and repeat properties.

However, I have found that a table or a div container comes in handy in such cases.

<table border=1 cellspacing=0 cellpadding=0 height=400 width=600>
<tr>
<td align=center><img src="cart.jpg" style="height: 100%"></td>
</tr>
</table>
<div style="height: 400px; width: 600px; border: 1px solid red">
<center><img src="cart.jpg" style="height: 100%"></center>
</div>