Redimensionner les images proportionnellement à l'aide de CSS
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1393
52
1205
24
Vue 3
Apr 02, 2025 pm 06:32 PM
Il est sorti! Félicitations à l'équipe Vue pour l'avoir fait, je sais que ce fut un effort massif et une longue période à venir. Tous les nouveaux documents aussi.
Construire une application Ethereum à l'aide de Redwood.js et de la faune
Mar 28, 2025 am 09:18 AM
Avec la récente montée du prix du bitcoin sur 20k $ USD, et pour lui, récemment en train de briser 30k, je pensais que cela valait la peine de reprendre une profonde plongeon dans la création d'Ethereum
Pouvez-vous obtenir des valeurs de propriété CSS valides du navigateur?
Apr 02, 2025 pm 06:17 PM
J'ai eu quelqu'un qui écrivait avec cette question très légitime. Lea vient de bloguer sur la façon dont vous pouvez obtenir les propriétés CSS valides elles-mêmes du navigateur. C'est comme ça.
Un peu sur CI / CD
Apr 02, 2025 pm 06:21 PM
Je dirais que "Site Web" correspond mieux que "Application mobile" mais j'aime ce cadrage de Max Lynch:
Cartes empilées avec un positionnement collant et une pincée de sass
Apr 03, 2025 am 10:30 AM
L'autre jour, j'ai repéré ce morceau particulièrement charmant sur le site Web de Corey Ginnivan où une collection de cartes se cassent les uns sur les autres pendant que vous faites défiler.
Utilisation de Markdown et de la localisation dans l'éditeur de blocs WordPress
Apr 02, 2025 am 04:27 AM
Si nous devons afficher la documentation à l'utilisateur directement dans l'éditeur WordPress, quelle est la meilleure façon de le faire?
Comparaison des navigateurs pour une conception réactive
Apr 02, 2025 pm 06:25 PM
Il existe un certain nombre de ces applications de bureau où l'objectif montre votre site à différentes dimensions en même temps. Vous pouvez donc, par exemple, écrire
Pourquoi les zones réduites pourpre dans la disposition Flex sont-elles considérées à tort «espace de débordement»?
Apr 05, 2025 pm 05:51 PM
Questions sur les zones de slash violet dans les dispositions flexibles Lorsque vous utilisez des dispositions flexibles, vous pouvez rencontrer des phénomènes déroutants, comme dans les outils du développeur (D ...
