Graphoeil Multimédia
Menu

Une img parfaitement ajustée avec object-fit:cover

L'astuce pour une image qui s'ajustera toujours à son conteneur !

Découvrons aujourd'hui la propriété CSS3 object-fit qui définit la façon dont le contenu d'un élément doit s'adapter à son conteneur.

Un exemple pour tout comprendre

Nous créons un simple div que nous allons rendre redimensionnable grâce à jQuery UI.

<div id="conteneur"> <img src="imgBlog/grenouille.jpg" alt="une grenouille sur un nénuphar"> </div>

Passons à la stylisation CSS. Attention cette propriété CSS (comme bien d'autres d'ailleurs) n'est pas compatible avec IE (pas très surprenant) et même Edge (alors là, bravo Microsoft !!), nous indiquons donc pour ces deux navigateurs une width et une height de 100%. La propriété object-fit réglé sur cover agrandira l'image en respectant ses proportions pour l'ajuster à son conteneur.

#conteneur{ display:block; margin:10px; width:300px; height:200px; overflow:hidden; } #conteneur img{ display:block; width:100%; height:100%; object-fit:cover; }

Rezisable avec jQuery UI

Nous ajoutons quelques lignes de jQuery UI pour rendre le conteneur redimensionnable. Pour que cela fonctionne sur tablette et mobile nous ajoutons le plug-in jQuery UI Touch Punch.

$('#conteneur').resizable({ handes:'s,e' });

Le résultat en images !

une grenouille sur un nénuphar

Conclusion

Cette technique remplace parfaitement tout les bidouillages que nous avons pu mettre en œuvre pour parvenir à ajuster une image à son conteneur, n'hésitez pas à l'utiliser lors de la création de galerie photo, de slideshow, de boutique en ligne notamment sur les fiches produits, etc...

Liens utiles

jQueryjQuery UIjQuery UI Touch Punch