15

该表有 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>

我得到的是这样的：

在此处输入图像描述

图像不适合所有单元格。

如何重新调整这些图像的大小？我需要一个适用于 IE9 的建议。

4

3 回答 3

41

只需将图像宽度设置为 100% 并将高度设置为自动以防止图像看起来失真

所以像

#menu img{
      display:block; width:100%; height:auto;
}
于 2012-09-20T18:27:21.910 回答
3

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

属性max-width并max-height没有设置元素的尺寸，它们限制了尺寸。

于 2012-09-20T18:18:35.867 回答
0

字体大小和显示块

<td style="font-size:0px">
   <img src="IMG_URL" width="XXX" style="display:block;"> 
</td>
于 2021-02-14T18:53:25.013 回答