EFFET CSS REMIGE / ZOOM-IN SUR L'image tout en gardant les dimensions

Les images sont la partie la plus importante et la plus cruciale du développement Web. Parfois, les développeurs Web ajoutent divers effets sur les images pour rendre la page Web plus attrayante, notamment en retournant les images, en zoomant, en zoomant les effets, etc. Plus précisément, dans le processus de zoom-in, une image s'agrandit selon l'exigence. Dans une visionneuse d'images, le processus de zoom-in est très important. Pour obtenir ce processus, les utilisateurs peuvent utiliser le «escalader()" et "traduire()«Méthodes.

Cet article examinera:

• Comment insérer une image en html?
• Comment redimensionner / zoomer sur une image tout en gardant les dimensions dans CSS?

Comment insérer une image en html?

Pour ajouter une image dans HTML, les utilisateurs doivent suivre ces étapes déclarées.

Étape 1: Créez un conteneur «div»

Tout d'abord, utilisez le «div«Élément pour créer un conteneur« div ». Ensuite, insérez un attribut de classe et spécifiez un nom particulier pour cela

Étape 2: Ajouter une image

Ensuite, ajoutez une image à l'aide du «" étiqueter. À l'intérieur de la balise IMG, spécifiez les attributs suivants:

• "SRC"L'attribut est utilisé pour ajouter un fichier multimédia.
• "alt"Est utilisé pour afficher le texte sur une image lorsque l'image n'est pas affichée pour une raison quelconque:

On peut observer qu'une image a été ajoutée avec succès:

Comment redimensionner / zoomer sur une image tout en gardant les dimensions dans CSS?

Pour redimensionner / zoomer en effet sur une image tout en gardant les dimensions, accédez à l'image avec un «:flotter«Effet et appliquez»transformer"Avec valeur"échelle (2.0)"

Essayez les instructions données mentionnées ci-dessous pour le faire.

Étape 1: Style le conteneur «div»

Accédez au conteneur «div» en utilisant le nom de classe «.contenu IMG»Et appliquez les propriétés CSS répertoriées ci-dessous:

.IMG-CONTENT
Affichage: bloc en ligne;
débordement: initial;
marge: 20px 100px;
rembourrage: 40px;
Largeur: 300px;
hauteur: 300px;
Color en arrière-plan: RVB (233, 146, 16);

Ici:

• "afficher»La propriété est utilisée pour définir l'affichage pour une image. Pour ce faire, la valeur de cette propriété est définie comme «bloc en ligne".
• "débordement»Contrôle le contenu long pour s'intégrer dans une zone.
• "marge”Définit un espace sur le côté le plus à l'extérieur de la limite de l'élément.
• "rembourrage"Est utilisé pour allouer de l'espace à l'intérieur de la zone définie.
• "largeur"Est utilisé pour régler la largeur de l'élément.
• "hauteur»La propriété alloue la hauteur particulière pour un élément.
• "Couleur de l'arrière plan»Spécifie une couleur pour l'arrière d'un élément.

Sortir

Étape 2: Appliquez de survol sur l'image

Accédez à l'image avec un effet de survol comme «IMG: planant»:

IMG: Hover
Transformer: échelle (2.0);

Ensuite, appliquez le «transformer»Propriété qui est utilisée pour régler la transformation 2D ou 3D pour un élément. À cette fin, la valeur de cette propriété est définie à titre d'échelle (2.0). Plus précisément, le «escalader()»La fonction CSS est utilisée pour définir la transformation qui est utilisée pour redimensionner l'élément sur le plan 2D.

Sortir

C'est tout sur ce post pour l'effet zoom-in sur une image tout en gardant les dimensions.

Conclusion

Pour redimensionner / zoomer en vigueur sur une image, insérez d'abord une image dans la page HTML, puis appliquez les propriétés CSS, y compris «afficher”Pour définir l'affichage de l'élément et«débordement», Qui est utilisé pour contrôler le contenu trop grand pour s'adapter dans une zone. Après cela, accédez à l'image avec le «:flotter«Effet et appliquez la propriété de transformation avec la valeur«échelle (2.0)”Pour redimensionner l'élément au plan 2D. Ce message a expliqué la méthode de redimensionnement / zoom en vigueur sur une image tout en gardant la dimension.