Maison > interface Web > tutoriel CSS > le corps du texte

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

黄舟
Libérer: 2017-07-26 13:35:52
original
2311 Les gens l'ont consulté

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;
}
Copier après la connexion

 ◎ 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); 
}
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!