CODEWITHSUNDEEP
htmlhtml-table
Fearghal
Fearghal

Reputation: 11447

How to stretch png image to cell width and keep correct cell/height ratio

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

Answers (1)

Ani
Ani

Reputation: 4523

Fiddle: http://jsfiddle.net/qRxJB/

CSS Add this

 .styleObj img{
       width: 100%;
  }

Also, remove this:

.styleObj
{
        height:100%;
        width:100%;
}

Upvotes: 3

Related Questions