Html 缩小图像大小以适合表格单元格，这适用于所有浏览器吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17642539/
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
Shrink image size to fit table cell, which works in all browsers?
提问by Ahmad
I have a tablewhich has images in its cells. I want these images to shrink automatically when the window width is reduced. But they should notexpand beyond their native size when there's extra space around.
我有一个table在其单元格中有图像的。我希望这些图像在窗口宽度减小时自动缩小。但他们应该不会扩大超出其本身尺寸时，有周围多余的空间。
I have a solution for this which works in Chrome, but it does not work in Firefox or Internet Explorer. On Firefox and Internet Explorer, images do not shrink when the window width is reduced, and instead a scroll appears.
我有一个适用于 Chrome 的解决方案，但它不适用于 Firefox 或 Internet Explorer。在 Firefox 和 Internet Explorer 上，当窗口宽度减小时，图像不会缩小，而是出现一个滚动条。
How do I get it to work on all browsers ?
我如何让它在所有浏览器上工作？
JSFiddle:http://jsfiddle.net/ahmadka/GeDxr/
JSFiddle：http : //jsfiddle.net/ahmadka/GeDxr/
CodePen (JSFiddle is down sometimes):http://codepen.io/anon/pen/JhsED
CodePen（JSFiddle 有时会关闭）：http ://codepen.io/anon/pen/JhsED
HTML:
HTML：
<div class="imageTable">
<table>
<tbody>
<tr>
<td>
<img class="autoResizeImage" src="http://173.254.28.69/~bluraysp/web/images/footer/payment/normal/moneybookers.png" />
</td>
<td>
<img class="autoResizeImage" src="http://173.254.28.69/~bluraysp/web/images/footer/payment/normal/2checkout.png" />
</td>
<td>
<img class="autoResizeImage" src="http://173.254.28.69/~bluraysp/web/images/footer/payment/normal/visa.png" />
</td>
<td>
<img class="autoResizeImage" src="http://173.254.28.69/~bluraysp/web/images/footer/payment/normal/mastercard.png" />
</td>
</tr>
</tbody>
</table>
</div>
CSS:
CSS：
.autoResizeImage {
max-width: 100%;
height: auto;
width: auto;
}
回答by Mr Lister
Change width:autoto width:100%does the trick.
更改width:auto为width:100%可以解决问题。
回答by Dallas
Try changing the max-width to the largest or actual size of the image - 56px. That will ensure that the image gets no larger. You might also add max-height.
尝试将最大宽度更改为图像的最大或实际大小 - 56px。这将确保图像不会变大。您还可以添加最大高度。
