Maison > Article > interface Web > Comment empêcher les images de se déformer avec CSS
Comment empêcher les images de se déformer avec CSS
- 藏色散人original
- 2021-04-08 09:36:226093parcourir
Comment obtenir la non-déformation des images en utilisant CSS : créez d'abord un exemple de fichier HTML ; puis ajoutez la balise img au corps et introduisez enfin l'image en définissant la "hauteur maximale" ou " ; max-width" attribut L'image n'a pas besoin d'être déformée.
L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.
Si vous souhaitez que l'image ne soit pas déformée, définissez-en une de hauteur maximale ou de largeur maximale, ou fixez-en une de largeur ou de hauteur.
Les attributs max-height et max-width définissent la hauteur et la largeur maximales de l'élément.
Valeur de l'attribut :
aucune Par défaut. La définition n'impose aucune limite sur la hauteur maximale autorisée pour un élément.
length définit la valeur de hauteur maximale de l'élément.
% définit la hauteur maximale en pourcentage de l'objet au niveau du bloc qui la contient.
inherit spécifie que la valeur de l'attribut max-height doit être héritée de l'élément parent.
Les attributs height et width définissent la hauteur et la largeur de l'élément.
Valeur de l'attribut :
auto par défaut. Le navigateur calculera la hauteur réelle.
length définit la hauteur en utilisant des unités telles que px, cm, etc.
% Basé sur le pourcentage de hauteur de l'objet au niveau du bloc qui le contient.
inherit spécifie que la valeur de l'attribut height doit être héritée de l'élément parent.
Exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
float: left;
}
.test1 img {
width: 187.5px;
height: 156.5px;
}
.test2 img {
width: 300px;
height: 100px;
}
.test3 img {
max-width: 300px;
max-height: 100px;
}
.test4 img {
max-width: 100%;
height: 200px;
}
.test5 {
width: 300px;
height: 200px;
}
.test5 img {
max-width: 100%;
max-height: 100%;
}
.test6 {
width: 300px;
height: 100px;
/*overflow: hidden;*/
}
.test6 img {
max-width: 300px;
max-height: 100px;
}
.test7 {
width: 300px;
height: 100px;
/*overflow: hidden;*/
}
.test7 img {
max-width: 300px;
}
</style>
</head>
<body>
<div class="test1">
<img src="1.jpg" / alt="Comment empêcher les images de se déformer avec CSS" >
</div>
<div class="test2">
<img src="1.jpg" / alt="Comment empêcher les images de se déformer avec CSS" >
</div>
<div class="test3">
<img src="1.jpg" / alt="Comment empêcher les images de se déformer avec CSS" >
</div>
<div class="test4">
<img src="1.jpg" / alt="Comment empêcher les images de se déformer avec CSS" >
</div>
<div class="test5">
<img src="1.jpg" / alt="Comment empêcher les images de se déformer avec CSS" >
</div>
<div class="test6">
<img src="1.jpg" / alt="Comment empêcher les images de se déformer avec CSS" >
</div>
<div class="test7">
<img src="1.jpg" / alt="Comment empêcher les images de se déformer avec CSS" >
</body>
</html>L'effet est tel qu'illustré :
[Apprentissage recommandé : Tutoriel vidéo CSS]
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!