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
Vous devez vous connecter pour publier un commentaire.
Changement
width:auto
àwidth:100%
fait le tour.Mise à jour jsFiddle
J'ai confirmé que la même feuille de style CSS est appliqué dans ma page (seulement le nom de la règle a été modifiée à partir de
autoResizeImage
àautoResizeTableImage
) .. Tout le reste est le même, donc je ne sais pas pourquoi les images sont en pleine expansion .. Et ce qui se passe dans Chrome !OriginalL'auteur Mr Lister
D'essayer de changer le max-width pour la plus grande ou la taille réelle de l'image - 56px.
Qui va s'assurer que l'image est plus grande. Vous pouvez aussi ajouter max-hauteur.
OriginalL'auteur Dallas