10

我有一个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;
}
4

2 回答 2

9

更改width:auto为width:100%可以解决问题。

更新了 jsFiddle

于 2013-07-14T19:06:32.050 回答
1

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

于 2014-02-06T18:01:38.203 回答