此表有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的建议。
答案 0 :(得分:32)
只需将图像宽度设置为100%并使高度自动以防止图像变形
类似
#menu img{
display:block; width:100%; height:auto;
}
答案 1 :(得分:2)
如果您希望它完全适合,请使用width:100%
和height:100%
。
属性max-width
和max-height
不设置元素的维度,限制维度。
答案 2 :(得分:0)
字体大小和显示块
<td style="font-size:0px">
<img src="IMG_URL" width="XXX" style="display:block;">
</td>