Rétrécir la taille de l'image pour s'adapter à la cellule de la table, qui fonctionne dans tous les navigateurs?

J'ai un table qui a des images dans ses cellules. J'ai besoin de ces images pour réduire automatiquement lorsque la largeur de la fenêtre est réduite. Mais ils devraient pas étendre au-delà de leur taille d'origine, quand il y a un espace supplémentaire autour de.

J'ai une solution qui fonctionne dans Chrome, mais il ne fonctionne pas dans Firefox ou Internet Explorer. Sur Firefox et Internet Explorer, les images ne rétrécissent pas quand la largeur de la fenêtre est réduite, et au lieu d'un défilement apparaît.

Comment puis-je le faire fonctionner sur tous les navigateurs ?

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

CodePen (JSFiddle est vers le bas, parfois): 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;
}

OriginalL'auteur Ahmad | 2013-07-14