Html 调整图像大小以适合 TD 的尺寸
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12518441/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
resize the image to fit the dimensions of TD
提问by Malloc
This table has 2 columns and 5 rows; in each cell I put an image and I need that image to fit the tddimensions.
该表有 2 列 5 行；在每个单元格中，我都放了一张图像，我需要该图像来适应td尺寸。
Here is my HTML and CSS code:
这是我的 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>
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.
如何重新调整这些图像的大小？我需要一个适用于 IE9 的建议。
回答by somdow
Just make the images width to 100% and make the height auto to keep the images from looking distorted
只需将图像宽度设置为 100% 并将高度设置为自动以防止图像看起来失真
so something like
所以像
#menu img{
display:block; width:100%; height:auto;
}
回答by Matt K
If you want it to fit exactly, use width:100%and height:100%.
如果您希望它完全适合，请使用width:100%和height:100%。
The properties max-widthand max-heightdo not setthe dimensions of an element, they restrictthe dimensions.
属性max-width并max-height没有设置元素的尺寸，它们限制了尺寸。
