Reputation: 11447
I have a table with 4 cells evenly split across 80% width of screen. My png files display correctly but are not filling the cells width so it looks bad.
I want the height stretching to maintain ratio. How can i do this? I know i can put height-100% and width=100% into each img but how do i use css to do same? .styleObj width and height doesnt seem to affect it.
<style type="text/css">
.styleTbl
{
margin-bottom:10%;
margin-left:10%;
background: #aeaeae;
width:80%;
}
.styleCol
{
background: #ffffff;
}
.styleRow
{
background: #000000;
}
.styleBg
{
background: #00aced;
}
.style_logo
{
width:80%;
}
.styleObj
{
height:100%;
width:100%;
}
</style>
<link href="favicon.ico" type="image/x-icon" rel="shortcut icon" />
<img alt="logo_banner Missing" class="style_logo" longdesc="Banner" src="logo_banner.png"/>
<br />
<table class="styleTbl">
<tr class="styleRow">
<td class="styleObj">
<object data=index.html></object></td>
<td class="styleObj">
<img alt="png" longdesc="png1" src="png1.png"/></td>
</tr>
<tr class="styleRow">
<td class="styleObj">
<img alt="png1" longdesc="png1" src="png1.png"/></td>
<td class="styleObj">
<img alt="png1" longdesc="png1" src="png1.png"/></td>
</tr>
</table>
Upvotes: 0
Views: 982
Reputation: 4523
Fiddle: http://jsfiddle.net/qRxJB/
CSS Add this
.styleObj img{
width: 100%;
}
Also, remove this:
.styleObj
{
height:100%;
width:100%;
}
Upvotes: 3