Question

我有一张桌子，4个单元格均匀分布在80％的屏幕宽度上。我的png文件显示正确，但没有填充单元格宽度，所以它看起来很糟糕。

我希望高度伸展以保持比例。我怎样才能做到这一点？我知道我可以将高度100％和宽度= 100％放入每个img但我如何使用css做同样的事情？ .styleObj宽度和高度似乎不会影响它。

<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>

Answer 1

小提琴：http://jsfiddle.net/qRxJB/

<强> CSS 添加此

 .styleObj img{
       width: 100%;
  }

另外，删除此：

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

如何将png图像拉伸到单元格宽度并保持正确的单元格/高度比

1 个答案: