调整图像大小以适应TD的尺寸 [英] resize the image to fit the dimensions of TD

问题描述

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

和CSS代码：

  #menu {
 float：right; 
 width：200px; 
 height：650px; 
 border-bottom：none; 
 border-left：solid 1px; 
 
} 
 
 
 #menu img {
 width：100％; height：auto ;; 
} 
 
 td {
 border：fixed 1px; 
} 
 
< table id =menucellspacing =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 { 
 width：100％; height：auto; 
} 
  

This table has 2 columns and 5 rows; in each cell I put an image and I need that image to fit the td dimensions.

Here is my HTML and CSS code:

#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>

What I got is this:

The images doesn't fit all the cells.

How can I re-size these images? I need a suggestion which works with IE9.

解决方案

Just make the images width to 100% and make the height auto to keep the images from looking distorted

so something like

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

这篇关于调整图像大小以适应TD的尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！