Introduction à la façon de contrôler la taille de l'image en CSS

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!