Lorsque nous concevons des pages Web, nous rencontrons toujours des choses désagréables. Le plus courant est qu'après avoir ajouté du contenu en arrière-plan, nous constatons que la page affichée est répandue ouverte, ce qui rend la page Web extrêmement disgracieuse. Dans le passé, les gens ont essentiellement conçu des tables, il existe donc naturellement de nombreuses solutions en ligne. Maintenant, il y a des conceptions standard Div CSS, et elles voient rarement les bonnes méthodes connexes. Maintenant, Xiaoxiang Online résume les bonnes méthodes trouvées dans la vie quotidienne pour empêcher les tables d'être étalées et les partager avec vous.
1. Définissez la taille de l'image directement sur la page Web, par exemple, le code: <img src = http: //www.cuoxin.com/images/cuoxincom.jpg width = 600 height = 500 border = 0>. Bien que cela puisse limiter la taille de l'image, vous devez modifier manuellement la taille de l'image avant de télécharger l'image, sinon l'image téléchargée se déformera.
2. Utilisez le code suivant: <img src = http: //www.cuoxin.com/images/cuoxincom.jpg onload = javascript: if (this.width> 600} {this.resized = true; this.style.width = 600;}>
Cette méthode se rétrécira automatiquement à la largeur spécifiée lors de l'appel de l'image, ce qui ne fera pas déformer l'image et ne brisera pas le tableau. Cependant, l'inconvénient est que si l'image est trop grande, pendant le processus de téléchargement de l'image, c'est-à-dire pendant le processus d'affichage de l'image, il sera d'abord affiché dans la taille d'origine de l'image, qui cassera la table, et la page sera laide. Deuxièmement, lorsque l'image est complètement affichée, l'image rétrécira automatiquement.
3. Nous pouvons limiter la taille de la table pour empêcher qu'il ne soit étiré, par exemple, ajouter le code dans <Table Width = 600 Border = 0 CellPadding = 0 Cellpacing = 0> Style = Table-Layout: Fixed; Word-Wrap: Break-Word; Break-Break; Break-all;, Where Table-Layout: Fixed; est de fixer la disposition du tableau, ce qui peut effectivement empêcher le tableau d'être étiré. Word-Wrap: Break-Word; est de contrôler les ruptures de ligne, c'est-à-dire pour appliquer les pauses de ligne. Cela doit être utilisé lorsqu'il y a beaucoup de contenu texte. Un contenu en double extraordinaire apparaît et si les ruptures de ligne ne sont pas exécutées, le tableau sera étiré; et brise de mots: interruption; Il peut résoudre le problème que le framework IE est réparti par l'anglais (lignes de texte non asiatique), mais il ne forcera pas une enveloppe de ligne, et seul le contenu de la largeur de la table est affiché. D'une manière générale, utilisez simplement Style = Table-Layout: Fixed; Word-Wrap: Break-Word; Bien sûr, les déclarations appelées ci-dessus peuvent être définies dans CSS, par exemple
| tableau { Table-Layout: fixe; Word-Wrap: Break-Word; } |
4. Utilisez CSS pour contrôler la taille adaptative de l'image, le code est le suivant:
| img { largeur maximale: 600px; largeur: expression (this.width> 600? 600px: this.width); débordement: caché; } |
Parmi eux, la largeur maximale: 600px; Dans d'autres navigateurs non IE tels que IE7 et Firefox, la largeur maximale est de 600px, mais elle n'est pas valide dans IE6; Largeur: 600px; Dans tous les navigateurs, la taille de l'image est de 600px. Lorsque la taille de l'image est supérieure à 600px, elle rétrécira automatiquement à 600px, ce qui est valide dans IE6; et débordement: caché; fait référence à la cachette de la partie au-delà de la taille de l'ensemble pour éviter la déformation du tableau en raison de l'échec de contrôler la taille de l'image. 2 pages de la page suivante de la page suivante précédente