Résumé de 4 façons d'éviter que les tableaux ne soient cassés lors de la création de pages Web. J'espère que cela sera utile à tout le monde !
1. Utilisez <img src="/images/NullPic.gif" width="400" height="300"> pour fixer directement la taille de l'image.
Cette méthode ne provoquera pas de confusion dans l'affichage de la page, mais les images affichées sont souvent déformées.
Pas recommandé du tout.
2. Utilisez <img src="/images/NullPic.gif" >
Cette méthode sera automatiquement réduite à la largeur spécifiée lors de l'appel de l'image, sans provoquer de déformation de l'image, et n'éclatera pas la table, donc elle ne le fera pas. provoquer une confusion dans l'affichage des pages.
Mais il y a aussi un inconvénient : si l'image est trop grande, pendant le processus d'affichage de l'image (processus de téléchargement), elle sera toujours affichée dans sa taille originale. À ce moment-là, le tableau sera cassé et le tableau sera brisé. la page sera moche. Bien entendu, l’image rétrécira automatiquement lorsqu’elle sera entièrement affichée.
3. Afin d'éviter que l'image ne casse le tableau, sur la base de ce qui précède, restreignez le tableau :
ajoutez des codes de restriction à la balise du tableau <table>, <table width="500" border="0" align="center " cellpadding ="0" cellpacing="0"> peut empêcher efficacement l'étirement du tableau.
4. Pour aller plus loin, vous pouvez utiliser la molette de la souris pour zoomer et dézoomer sur l'image :
<SCRIPT type=text/javascript>
fonction bbimg(o){
var zoom=parseInt(o.style.zoom, 10)||100;zoom+=event.wheelDelta/12;if (zoom>0) o.style.zoom=zoom+'%';
renvoie faux ;
}
</SCRIPT>
La méthode d'utilisation est la suivante :
<img src="/images/NullPic.gif" >
Vous pouvez également utiliser le style :
img {
largeur maximale : 500 px ; largeur : expression (this.width > 500 ? "500px " : this.width)
}