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%即可。

Updated jsFiddle

Answer 2

尝试将最大宽度更改为图像的最大或实际尺寸 - 56px。这将确保图像不会变大。您也可以添加max-height。

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

2 个答案: