web-dev-qa-db-fra.com

Réduire la taille de l'image pour l'adapter à la cellule du tableau, ce qui fonctionne dans tous les navigateurs?

J'ai une table qui a des images dans ses cellules. Je veux que ces images se réduisent automatiquement lorsque la largeur de la fenêtre est réduite. Mais ils devraient pas se développer au-delà de leur taille native lorsque l'espace disponible est suffisant.

J'ai une solution pour cela qui fonctionne dans Chrome, mais cela ne fonctionne pas dans Firefox ou Internet Explorer. Sous Firefox et Internet Explorer, les images ne sont pas réduites lorsque la largeur de la fenêtre est réduite, mais un défilement apparaît.

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

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

CodePen (JSFiddle est parfois en panne):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;
}
htmlcsscross-browserimage-resizing
10
Ahmad

Changer width:auto en width:100% fait l'affaire.

Mise à jour jsFiddle

8
Mr Lister

Essayez de changer la largeur maximale à la taille maximale ou réelle de l'image - 56px . Cela garantira que l'image ne sera pas plus grande. Vous pouvez également ajouter une hauteur maximale.

1
Dallas