1. Exemple de solution de compétences en matière de production de pages Web : utiliser CSS pour contrôler la taille adaptative des images
Adapter automatiquement la taille des images est une fonction très courante. , lors de la création Afin d'empêcher l'image d'ouvrir le conteneur, nous devons contrôler la taille de l'image. Pouvons-nous utiliser CSS pour contrôler l'image afin qu'elle s'adapte à la taille ?
Nous avons pensé à une solution relativement simple. Même si elle n'est pas parfaite, si vos exigences ne sont pas très élevées, elle peut déjà répondre à vos besoins. Regardons le code suivant :
p img { max-width:600px; width:600px; width:expression(document.body.clientWidth>600?"600px":"auto"); overflow:hidden; }
◎ max-width : 600px ; La largeur maximale est de 600px sous IE7, FF et autres navigateurs non-IE. Mais cela ne fonctionne pas dans IE6.
◎ width:600px; La taille de l'image dans tous les navigateurs est de 600px;
◎ Lorsque la taille de l'image est supérieure à 600px, elle sera automatiquement réduite à 600px. Valable dans IE6.
◎ overflow:hidden; Cachez la partie excédentaire pour éviter l'étirement et la déformation causés par le non-contrôle de la taille de l'image.
2. Parfois, l'image est trop grande, ce qui détruira la mise en page soignée de la page Web. À ce stade, vous pouvez utiliser css pour forcer la compression proportionnelle de la hauteur ou de la largeur de l'image
Le code css est le suivant :
img,a img{ border:0; margin:0; padding:0; max-width:590px; width:expression(this.width>590?"590px":this.width); max-height:590px; height:expression(this.height>590?"590px":this.height); }
De cette façon, si la hauteur ou la largeur de l'image dépasse 590 px, elle sera compressée proportionnellement à 590 px. Si elle ne dépasse pas, elle sera affichée à sa taille d'origine.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!