调整图像大小以适应TD的尺寸

时间:2012-09-20 18:14:16

标签: html css internet-explorer-9

此表有2列5行;在每个单元格中我放置了一个图像,我需要该图像以适合td维度。

这是我的HTML和CSS代码:

#menu{
        float:right;
        width:200px;
        height:650px;
        border-bottom:none;
        border-left:solid 1px;

}


#menu img{
        width:100%; height:auto;;
}

td{
  border:solid 1px;
}

<table id="menu" cellspacing="0">
<tr><td class="item"><img src="../mke.jpg"/></td><td class="item"><img src="../mke.jpg"/></td></tr>
<tr><td class="item"><img src="../mke.jpg"/></td><td class="item"><img src="../mke.jpg"/></td></tr>
<tr><td class="item"><img src="../mke.jpg"/></td><td class="item"><img src="../mke.jpg"/></td></tr>
<tr><td class="item"><img src="../mke.jpg"/></td><td class="item"><img src="../mke.jpg"/></td></tr>
</table>

我得到的是:

enter image description here

图像不适合所有细胞。

如何重新调整这些图片的尺寸?我需要一个适用于IE9的建议。

3 个答案:

答案 0 :(得分:32)

只需将图像宽度设置为100%并使高度自动以防止图像变形

类似

#menu img{
      display:block; width:100%; height:auto;
}

答案 1 :(得分:2)

如果您希望它完全适合,请使用width:100%height:100%

属性max-widthmax-height设置元素的维度,限制维度。

答案 2 :(得分:0)

字体大小和显示块

<td style="font-size:0px">
   <img src="IMG_URL" width="XXX" style="display:block;"> 
</td>