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

前端之家收集整理的这篇文章主要介绍了html – 调整图像大小以适应TD的尺寸前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
该表有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的建议.

解决方法

只需将图像宽度设置为100%并使高度自动保持图像不会变形

所以像

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

猜你在找的HTML相关文章