html - 为什么缩放后的图像仍然占据原始宽度和高度？

Question

我正在尝试在表格单元格中附加按比例缩小的图像。不知何故，缩放后的图像仍然占据原始大小。

这就是我到目前为止所拥有的（更新）

http://jsfiddle.net/qnUgx/1/

代码

<img style="display: block;width:250px;height:auto" src="http://www.ucmas.com/wp-content/uploads/2013/06/DinoArt-Logo.png"/>

如果您注意到第 6 项和第 7 项之间存在差距，我相信我的缩放方式仍然是错误的。我怎样才能消除差距？

该解决方案还应该允许内容在表格之后立即出现。

Answer 1

您更改 ROWSPAN 大小并消除第 6 项和第 7 项之间的差距。

像这样，

<table>
    <tr>
        <th>The 7 main categories in Dino Art:</th>
        <td rowspan="9"><img style="display: block;width:250px;height:auto" src="http://www.ucmas.com/wp-content/uploads/2013/06/DinoArt-Logo.png"/> </td>
    </tr>
    <tr>
        <td>111111</td>
    </tr>
    <tr>
        <td>222222</td>
    </tr>
    <tr>
        <td>3333333</td>
    </tr>
    <tr>
        <td>444444</td>
    </tr>
    <tr>
        <td>555555</td>
    </tr>
    <tr>
        <td>666666</td>
    </tr>
    <tr>
        <td>777777</td>
    </tr>
</table>

Answer 2

使用img标签的height width属性如下

 <td rowspan = 8><img   height = 100 width = 100 src="http://www.ucmas.com/wp-content/uploads/2013/06/DinoArt-Logo.png"/> </td>