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

Question

这个表格有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中可以使用的建议。

- Malloc

Answer 1

只需将图像的宽度设为100％，将高度设为自动以保持图像不变形

就像这样：

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

- somdow

---

如何确保图像的高度始终与单元格相匹配？ - Alex Semeniuk

这对我有用！我不需要使用 display:block。 - Eric Hepperle - CodeSlayer2010

Answer 2

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

属性max-width和max-height不会设置元素的尺寸，而是限制其尺寸。

- Matt K

Answer 3

字体大小和显示块

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

- AbedElraheem