缩小图像大小以适合表格单元格,适用于所有浏览器？

Question

我有一个table在其单元格中有图像的.我希望这些图像在窗口宽度减小时自动缩小.但他们应该不会扩大超出其本身尺寸时,有周围多余的空间.

我有一个适用于Chrome的解决方案,但它在Firefox或Internet Explorer中不起作用.在Firefox和Internet Explorer上,当窗口宽度减小时,图像不会缩小,而是显示滚动.

如何让它在所有浏览器上运行？

JSFiddle: http ://jsfiddle.net/ahmadka/GeDxr/

CodePen(JSFiddle有时会失败): http ://codepen.io/anon/pen/JhsED

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:

.autoResizeImage {
    max-width: 100%;
    height: auto;
    width: auto;
}

Answer 1

改变width:auto就width:100%可以了.

更新了jsFiddle