Recadrer une image en HTML

1. Utilisez les propriétés CSS width, height et overflow pour recadrer l’image en HTML
2. Utilisez les propriétés CSS object-fit pour recadrer l’image en HTML

Dans cet article, nous allons présenter des méthodes pour recadrer une image en HTML.

Utilisez les propriétés CSS width, height et overflow pour recadrer l’image en HTML

En plus de width et height, les conteneurs CSS ont également une propriété overflow qui peut être utilisée pour le recadrage d’images. Pour activer la propriété overflow, nous devons entourer l’image d’un div d’une largeur et d’une hauteur particulières et définir overflow sur hidden. Cela garantira que le conteneur de base conservera sa structure et que tout débordement d’image sera caché derrière le conteneur. Enfin, nous pouvons utiliser la propriété margin pour ajuster la zone recadrée. Cette propriété prend quatre valeurs. Cependant, seules la première et la dernière des quatre valeurs sont essentielles car elles représentent respectivement les pixels du haut et de la gauche.

Par exemple, insérez l’image avec l’URL https://tinyurl.com/k764en3w dans deux conteneurs différents. Donnez à la deuxième image une classe cropped afin que nous puissions lui appliquer des styles et recadrer l’image. En CSS, sélectionnez la classe cropped et réglez height et width sur 150px. Définissez la propriété overflow sur hidden. Ensuite, créez une bordure. Maintenant, sélectionnez la balise img de la classe cropped et définissez sa marge comme margin: -10px 0px 0px -180px.

De cette façon, nous pouvons recadrer une image en HTML en utilisant CSS.

Exemple de code :

<h3> Original image: </h3>
<img
    src="https://tinyurl.com/k764en3w"
    >
<h3> Cropped image: </h3>
<div class="cropped">
    <img
        src="https://tinyurl.com/k764en3w"
        >
</div>

.cropped {
     width: 150px;
     height: 150px;
     overflow: hidden;
     border: 5px solid black;
}

 .cropped img {
     margin: -10px 0px 0px -180px;
}

Utilisez les propriétés CSS object-fit pour recadrer l’image en HTML

La propriété CSS object-fit permet de recadrer les images. Elle peut avoir cinq valeurs, mais la valeur cover est la plus adaptée pour recadrer une image. Le réglage de object-fit sur cover conservera le rapport hauteur/largeur de l’image tout en s’adaptant à la taille de sa zone de contenu. Nous pouvons également utiliser la propriété object-fit en conjonction avec object-position pour ajuster la zone de l’image à recadrer. La propriété object-position requiert deux valeurs : x% et y% pour positionner l’image (la position par défaut est 50% 50%). On peut aussi fournir des positions de pixels : xpx et ypx, mais cela n’est généralement pas utile.

Par exemple, insérez l’image trois fois. La première image est l’image originale et les deux images seront les images recadrées. Donnez les classes cropped1 et cropped2 à la deuxième et à la troisième images. Définissez une largeur, une hauteur et une bordure spécifiques pour ces images. Utilisez la propriété object-fit et définissez-la sur cover sur les deux images. Dans la troisième image, définissez la propriété object-position sur 20% 10%.

De cette façon, nous pouvons recadrer une image en HTML en utilisant CSS.

Exemple de code :

<div>
    <h3> Original image: </h3>
    <img src="https://tinyurl.com/k764en3w">
    <h3> Cropped image using object-fit: </h3>
    <img
        class="cropped1" src="https://tinyurl.com/k764en3w">
    <h3> Cropped image adjusted with object-position: </h3>
    <img
        class="cropped2" src="https://tinyurl.com/k764en3w"> 
</div>

.cropped1 {
     width: 200px;
     height: 200px;
     object-fit: cover;
     border: 5px solid black;
}
 .cropped2 {
     width: 200px;
     height: 200px;
     object-fit: cover;
     object-position: 20% 10%;
     border: 5px solid black;
}