Vous pouvez recadrer des images avec quelques lignes de CSS, sans Photoshop ni autre outil de retouche. C’est utile lorsque les vignettes d’une mise en page à plusieurs colonnes ont des hauteurs différentes, comme ci-dessous.
AVANT
Les hauteurs irrégulières des vignettes peuvent facilement déséquilibrer toute la mise en page.
CSS
Copiez le code ci-dessous et collez-le dans votre fichier CSS.
img {
height: 200px;
object-fit: cover;
}
Essayez object-position: 10% 10%; si vous souhaitez déplacer l’image à l’intérieur de sa zone.
APRÈS
Vos 20 à 30 vignettes s’ajusteront parfaitement et votre mise en page ne paraîtra plus désordonnée. Cette méthode peut être utilisée sur n’importe quelle image individuelle de votre page web.