且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2022-11-02 14:19:28

只要使图像宽度为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;
}