Maison >interface Web >tutoriel CSS >Redimensionner les images proportionnellement à l'aide de CSS
Redimensionner les images proportionnellement à l'aide de CSS
- WBOYavant
- 2023-09-08 08:01:071677parcourir
Afin de rendre l'application réactive, nous devons également rendre les images réactives. Si l'image ne répond pas, un débordement se produit dans l'application et semble pire.
Nous devons donc également augmenter ou diminuer proportionnellement la taille de l'image en fonction de la taille de l'élément parent. Ici, nous allons apprendre différentes façons de redimensionner proportionnellement les images à l'aide de CSS.
Grammaire
Les utilisateurs peuvent redimensionner proportionnellement les images en utilisant la propriété CSS « width » selon la syntaxe suivante.
img {
width: 100%;
height: auto;
}
Dans la syntaxe ci-dessus, nous définissons une largeur et une hauteur automatique de 100 % pour l'image afin de la rendre réactive.
Exemple
Dans l'exemple ci-dessous, nous avons créé un élément div, spécifié le nom de la classe "image" et ajouté une image en tant qu'élément enfant à l'intérieur de l'élément div.
En CSS, nous définissons la largeur de l'élément div en pourcentage, égal à 30 % de la largeur totale. De plus, nous définissons une largeur de 100 % et une hauteur automatique pour l'image. Les utilisateurs peuvent modifier la taille de l'écran et voir la taille de l'image diminuer et augmenter proportionnellement à la taille de l'écran.
<html>
<head>
<style>
.image {
width: 30%;
margin: 0 auto;
border: 3px solid red;
padding: 10px;
}
img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2> Using the <i> width CSS property </i> to resize image proportionally </h2>
<div class = "image">
<img src = "https://www.tutorialspoint.com/python_pillow/images/tutorials_point.jpg" alt = "logo">
</div>
</body>
</html>
Exemple
Dans l'exemple ci-dessous, nous avons utilisé la propriété CSS « object-fit: contain » pour réduire la taille de l'image. Ici, nous définissons la largeur proportionnelle de l'élément div parent de l'image. De plus, nous utilisons la propriété CSS « object-fit: contain » pour l'élément « img ». Dans la sortie, l'utilisateur peut observer que l'image est réactive et que ses dimensions changent en fonction des dimensions de l'élément div.
<html>
<head>
<style>
.image {
width: 30%;
margin: 0 auto;
border: 3px solid red;
padding: 10px;
}
img {
width: 100%;
height: 50%;
object-fit: contain;
}
</style>
</head>
<body>
<h3> Using the <i> object-fit: contain CSS property </i> to resize image proportionally </h3>
<div class = "image">
<img src = "https://www.tutorialspoint.com/python_pillow/images/tutorials_point.jpg" alt = "logo">
</div>
</body>
</html>
Exemple
Dans l'exemple ci-dessous, nous utilisons la propriété CSS « background-size » pour modifier proportionnellement la taille d'une image. Ici, nous définissons une image d'arrière-plan pour l'élément div. De plus, nous utilisons « contain » comme valeur de la propriété CSS « background-size ». Il diffuse l'image dans toute la div. Si la taille de l’élément div augmente, la taille de l’image augmentera également. Si la taille de l’élément div est réduite, la taille de l’image sera également réduite.
<html>
<head>
<style>
.image {
width: 30%;
min-height: 30%;
margin: 0 auto;
border: 3px solid red;
padding: 10px;
background-image: url("https://www.tutorialspoint.com/python_pillow/images/tutorials_point.jpg");
background-size: contain;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h3> Using the <i> background-size CSS property </i> to resize image proportionally </h3>
<div class = "image"></div>
</body>
</html>
Les utilisateurs ont appris à modifier la taille de l'image proportionnellement. Ici, tout ce que nous devons faire est de définir les dimensions de l'image en pourcentage plutôt qu'en pixels ou en rem. De plus, les utilisateurs peuvent modifier proportionnellement la taille de l'image d'arrière-plan à l'aide de la propriété CSS « background-size ».
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!