Comment recadrer une image en utilisant CSS

Cet article discutera:

• Méthode 1: Comment recadrer une image à travers une propriété «débordement: cachée»?
• Méthode 2: Comment recadrer une image à travers une propriété «Image de fond»?
• Méthode 3: Comment recadrer une image à travers des propriétés de «position d'objet» et «objet»?

Préalable: création d'un fichier html

Pour intégrer une image dans le document HTML, suivez les instructions mentionnées:

• Ajouter un ""Tag pour créer une division et lui attribuer une classe"IMG-Crop-DIV". Mettre en œuvre le «style«Attribut pour définir l'élément«marge" propriété.
• Ensuite, utilisez la balise HTML avec les attributs «SRC», «Largeur» et «Hauteur» pour intégrer une image dans le document.
• Le "SRC»L'attribut définit l'URL source.
• Le "largeur»Définit la largeur de l'image.
• Le "hauteur»Détermine la hauteur de l'image.

Html

On peut observer que nous avons réussi à ajouter l'image à notre page Web:

Méthode 1: Comment recadrer une image à travers une propriété «débordement: cachée»?

Lorsque le contenu de l'élément est trop grand pour s'adapter dans la zone désignée, le «débordement»La propriété est définie pour ajouter des barres de défilement. De plus, il peut également être utilisé pour le recadrage de l'image ajoutée.

Pour une meilleure compréhension, stylissons notre conteneur.

Style «IMG-Crop-Div»

Le ".IMG-Crop-DIV"Est défini pour accéder à la classe"IMG-Crop-DIV". Le "hauteur" et "largeur»Les propriétés CSS sont utilisées pour allouer la zone d'image. Ensuite, la zone restante est coupée en utilisant le «débordement"Propriété CSS avec la valeur"caché".

Sortir

Ajuster la position de l'image recadrée

Maintenant, nous verrons comment ajuster la position de l'image:

En utilisant le «marge»La propriété avec les valeurs spécifiées pour le haut, la droite, la gauche et le bas nous a aidés à ajuster la position.

Sortir

Méthode 2: Comment recadrer une image à travers une propriété «Image de fond»?

Le "image de fond»La propriété CSS est utilisée pour spécifier les images d'arrière-plan. Cependant, une image peut être recadrée en utilisant cette propriété. Pour ce faire, d'abord, définissez la largeur et la hauteur de la contenant une image. En conséquence, l'image sera affichée dans la zone spécifiée.

Mise en œuvre du scénario ci-dessus dans CSS:

Ici le "position de fond»La propriété est utilisée pour ajuster la position initiale de l'image.

Sortir

Comment recadrer une image à travers des propriétés «objet-objet» et «position d'objet»?

CSS "ajustement d'objet»La propriété peut être spécifiée pour recadrer des images facilement. Il a cinq valeurs, mais le «couverture"Est le plus approprié à utiliser pour les images de recadrage.

Dans CSS, ajoutez l'extrait de code suivant pour le «IMG-Crop-DIV" classe:

Voici la description des propriétés données:

• En utilisant le «objet: couverture”Valeur de la propriété, le rapport d'aspect de l'image est maintenu tout en s'inscrivant dans la boîte à conteneurs.
• Le "position d'objet»La propriété définit la zone de l'image pour recadrer.

Sortir

Nous avons compilé les méthodes pour recadrer une image en utilisant CSS.

Conclusion

Pour recadrer une image en HTML, plusieurs propriétés CSS peuvent être utilisées. Les propriétés les plus couramment utilisées pour recadrer des images sont «débordement" avec "largeur" et "hauteur","image de fond","ajustement d'objet", et "position d'objet". Ce message a décrit plusieurs méthodes pour recadrer une image en utilisant CSS.