Guillaume Duverger - Développement & Graphisme - Blog

Dernière mise à jour de l'article : mars 2021

Les propriétés d'images :

La propriété CSS object-fit, qui fait partie de CSS Images Module Level 3 , permet de définir la façon dont le contenu d'un élément remplacé (voir plus bas) doit s'adapter à son élément parent, dont il faut indiquer la largeur ainsi que la hauteur.

La propriété object-position détermine, quant à elle, le positionnement de l'élément remplacé qui se trouve dans sa boite. Dans le cas où le contenu de l'élément remplacé ne couvre pas l'ensemble de la boite, on verra alors l'arrière-plan de l'élément.

En nous dirigeant sur Can I use , nous constatons, une fois n'est pas coutume, que les propriétés object-fit/object-position, ne fonctionnent pas sur Internet Explorer et que Edge les supporte partiellement. Il existe toutefois une solution à ce problème, que nous verrons par la suite.

Propriété object-fit :

La propriété object-fit va se révéler très utile dans le cas où un site comporte un système d'upload d'images (un site d'annonces immobilières par exemple). Il est fort probable que les images auront une hauteur et une largeur prédéfinies. Aussi, aura t-on pris soin de s'assurer côté serveur du traitement de la dimension de l'image (en php sans doute).

Mais, imaginons que les images soient au format paysage (rectangulaires) avec une largeur et une hauteur déterminées, et qu'un utilisateur télécharge une photo au format portrait (carrée), cette dernière sera écrasée, comme sur l'exemple ci-dessous :

C'est là qu'intervient la propriété object-fit :

Vous constatez alors que l'image est bien redimensionnée grâce à l'utilisation de la valeur cover. Justement, voyons plus précisement les valeurs de la propriété object-fit.

Les valeurs de la propriété object-fit :

-object-fit: fill est la valeur par défaut. Son rôle va être d'étendre l'image en largeur et en hauteur mais en ne tenant pas compte du ratio d'aspect. (voir image ci-dessus)

-object-fit: contain est la valeur qui va permettre de produire un format letterbox, conservant ainsi le ratio d'aspect tout en ajoutant un espace qui, selon les cas, se situera au-dessus ou au-dessous, ou bien à gauche ou à droite, ceci dans le but de conserver la bonne taille sans les écraser ni les étirer. (voir image ci-dessus)

-object-fit: cover permet de recadrer en plein écran (comme le fait la propriété background-size) où tout ce qui dépasse sur les côtés est éliminé. (voir image ci-dessus ainsi que l'exemple plus bas)

-object-fit: none conserve les dimensions originales de l'image et son ratio d'aspect, mais en se focalisant sur le centre de l'image, ce qui aura pour effet de supprimer les côtés de l'image.

-object-fit: scale-down se comporte à la manière de la valeur contain en conservant le ratio d'aspect et va permettre de redimensionner l'image aux dimensions idéales.

A titre de comparaison, utilisons trois méthodes différentes pour afficher une image. La première avec la propriété background-size et la valeur cover, la deuxième avec un élément div masqué en position absolue, et enfin avec la propriété object-fit. Vous voyez la différence ? Non ? Vraiment...

...Eh bien c'est normal, il n'y en a pas !

En résumé : pour que fonctionne la propriété object-fit, il est impératif de renseigner la largeur ainsi que la hauteur ET uniquement sur un élément remplacé. Pour ceux qui s'interrogent sur ce qu'est un élément remplacé, nous allons l'expliquer ci-dessous.

Un élément remplacé c'est quoi ?

Un élément remplacé est en fait tout simplement un élément HTML rendu nativement par le navigateur sans aucune intervention en CSS.

Parmi ces éléments on trouve :

Les balises d'un formulaire : <input> et <textarea>, les boutons (<button>), les images (<img>), les balises <audio> et <video>, ainsi que les balises <br>, <hr>, <object>, <iframe> et <canvas>.

La preuve par l'exemple. On va créer un textarea sans aucun style. Le navigateur va se charger de l'afficher à sa manière :

Propriété object-position :

La propriété object-fit s'associe avec la propriété object-position. Cette dernière permet l'alignement du contenu d'un élément remplacé dans sa boîte.

Dans l'exemple ci-dessus, nous avons décalé l'image en bas à gauche. Le fond noir est là pour bien vous montrer la position de l'image, qui a été changée avec la propriété object-position.

img{

background: black;
object-fit: contain;
object-position: bottom left 10px

}

Il est possible de renseigner les valeurs de diverses manières. La valeur initiale étant 50% 50% (ce qui revient à centrer l'image).

Ainsi, pouvons-nous indiquer des positions (top, left, right, bottom), des pourcentages, les unités em, rem, vh, ou encore des pixels (px).

Exemples d'utilisation des propriétés:

Un exemple d'utilisation d'object-fit : la mise en page.

<div class="demo_mep">
<img class="demo_mep_img" height=200 width=200 src="https://unsplash.imgix.net/photo-1416184008836-5486f3e2cf58?q=75&fm=jpg&s=1168eb53b941d6e992595864a3771f7a" alt/>
<div class="corps">
<h3>Titre</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tristique vestibulum gravida. Duis semper congue tortor a convallis. Nullam venenatis, quam at consequat facilisis, lorem elit bibendum velit, sed venenatis nisl lorem nec felis. Cras a dolor mauris. Suspendisse ultricies mattis ullamcorper. Suspendisse scelerisque enim sed magna dictum pretium. Vivamus fermentum, erat vel placerat tristique, nibh odio aliquam odio, eu accumsan turpis nisi sed risus.</p> 
<img style='float:right;border-radius:50%;object-fit:cover;margin-left:1rem;shape-outside:circle()' height=200 width=200 src="https://unsplash.imgix.net/photo-1416184008836-5486f3e2cf58?q=75&fm=jpg&s=1168eb53b941d6e992595864a3771f7a" alt/>
<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
</div>
</div>

*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}

/*mise ne page object-fit*/
.demo_mep{
overflow:hidden;
display:flex;
padding:1rem auto 2rem auto}

.demo_mep_img{
object-fit:contain;
margin-top:2rem}

.corps{width:60%}
/*fin mise ne page object-fit*/

Autre exemple d'utilisation : sprite avec object-position (passez votre souris sur les icônes)

<div class="sprite_demo">
<img src="sprite.svg" alt/>
</div>
<div class="sprite_demo1">
<img src="sprite.svg" alt/>
</div>

*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}
/*sprite object position*/
.sprite_demo,.sprite_demo1{margin:30px auto}
.sprite_demo img{
height:64px;
width:64px;
object-fit:none;
object-position:0 0;
transition:.2s ease-in-out}
.sprite_demo img:hover{cursor:pointer;object-position:0 -64px}
.sprite_demo1 img:hover{cursor:pointer;object-position:-64px 0}
.sprite_demo1 img{
height:64px;
width:64px;
object-fit:none;
object-position:0 0;
transition:.2s ease-in-out}
/*fin sprite*/

Exemple scale image :

<div class=scale>
<img src="image.jpg" alt>
</div> 

*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}
.scale{
position:relative;
height:480px;
width:auto}

.scale img{
left:50%;
top:25%;
transform:translate3d(-50%,0,0);
position:absolute;
width:301px;
height:200px;
overflow:hidden;
object-fit:none;
object-position:50% 75%;
border:.325rem solid white;
box-shadow:0 0 .5rem hsla(0,0%,0%,.5);
transition:1s cubic-bezier(.4,1,.2,1.4)}

.scale img:hover{
border:.625rem solid white;
box-shadow:0 0 .625rem hsla(0,0%,0%,.5);
transform:translate3d(-50%,-25%,0);
height:398px;
width:600px} 

Polyfill :

Si vous souhaitez utiliser object-fit en production, il vous faudra un script pour maintenir la compatibilité avec IE9+.

Télécharger le polyfill .