Petite astuce pour changer la taille du ratio des images.
Disons que nous avons une image avec une taille de ratio de 1:1 et nous voulons la changer pour une taille de ratio de 16:9.
Calculer la taille de recadrage
Calculez d’abord la taille que vous devez recadrer de l’image :
9/16= 56.25(%) /*taille en pourcentage de l’image après recadrage*/
100-56,25 =43,75(%) /*valeur en pourcentage du recadrage */
44 / 2 = 21.875(%) /*chaque côté*/
Base HTML & CSS
HTML
<figure>
<img src="image-name.jpg">
</figure>
CSS
figure{
width:300px; /*container-width*/
overflow:hidden; /*hide bounds of image */
margin:0; /*reset margin of figure tag*/
}
figure img{
display:block; /*remove inline-block spaces*/
width:100%; /*make image streatch*/
}
Ajouter des styles de recadrage
Maintenant il suffit d’ajouter une marge négative à l’image
figure img{
/*add to other styles*/
margin:-21.875% 0;
}
LIVE DEMO
Deuxième méthode, Ajouter la hauteur
Maintenant, allons dans le sens inverse. Disons que nous avons une image avec une taille de ratio de 16:9 et que nous voulons la changer pour une taille de ratio de 1:1.
Calculer la taille supplémentaire
- 16/9 = 1.7777 /*taille manquante pour le rapport 1:1*/
- 1,777 * 100 = 177,77(%) /*taille pour l’image avant recadrage*/
- 177.77-100 = 77,77 /*taille supplémentaire qui sera recadrée*/
- 77,77/2 = 38.885(%) /*taille supplémentaire qui sera recadrée à chaque taille*/
Base HTML & CSS
HTML
<figure>
<img src="image-name2.jpg">
</figure>
CSS
figure{
width:300px; /*container-width*/
overflow: hidden; /*hide bounds of image */
margin:0; /*reset margin of figure tag*/
}
figure img{
display:block; /*remove inline-block spaces*/
}
Ajouter des styles de recadrage
figure img{
/*add to other styles*/
margin:0 -38.885%;
width:177.777%;
}
LIVE DEMO
C’est tout, j’espère que vous l’apprécierez.
D’autres posts CSS que j’ai écrits :
CSS Position Sticky – Comment ça marche vraiment !
Nouvelles propriétés logiques CSS !
La nouvelle évolution du Responsive Design
Architecture CSS pour plusieurs sites web avec SASS
Les méthodes de grille CSS
Devenir un ninja de la grille CSS !
Vidéos, chaînes et playlists CSS recommandées
Suivez-moi sur :
Mon Twitter
Ma société
Vous pouvez me trouver dans mes groupes facebook :
CSS Masters
CSS Masters Israel
.