La propriété CSS - objectif-fit

Rédigé par Djb le 16 janvier 2016 4 commentaires

Comme adapter la taille de l'image en fonction des dimensions de son parent ?

La propriété CSS object-fit définit comment le contenu d'un élément remplacé doit s'adapter à son parent en utilisant sa largeur et sa hauteur.


    object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down;


fill

Le contenu remplacé est dimensionné pour remplir l'élément parent.

contain

Le contenu remplacé est dimensionné pour maintenir son ratio d'affichage tout en ajustant le contenu de l'élément : sa taille réelle est résolue comme une contrainte de contenu au lieu d'utiliser la largeur et la hauteur de l'élément.

cover

Le contenu remplacé est dimensionné pour maintenir son ratio d'affichage tout en remplissant toute l'élément parent : sa taille réelle est résolue comme une contrainte de couverture au lieu d'utiliser la largeur et la hauteur de l'élément.

none

Le contenu remplacé n'est pas redimensionné à l'intérieur de l'élément : la taille réelle de l'objet est déterminée par l'algorithme de taille par défaut sans taille spécifiée, et une taille par défaut de l'élément est égal à l'élément remplacé en utilisant la largeur et l'hauteur.

scale-down

Le contenu est dimensionné comme si none ou contain était spécifié, lequel aboutirait à une taille rélle plus petite.


img.cover {
object-fit: cover;
}


Pratique pour ne pas déformer les images et respecter le ratio, bien sûr cela ne fonctionne pas sous IE...

 

Classé dans : Bouts de code

CSS3

Retrouvez les plugins et templates pour PluXml

Information sur Djb, auteur de l'article:

La drogue cause des trous de mémoire et plein d’autres trucs moches dont je me souviens jamais.

4 commentaires

#1 

Je viens de tester et c'est vraiment au top pour conserver le ratio des images, mais comme d'habitude cela ne marche pas sous IE Commentaire de Eric

Répondre

#2 

Oui comme tu dis, j'ai pas testé sous IE Commentaire de Djb

Répondre

#3 

Le tableau de compatibilité de la propriété object-fit, sur Can I Use : http://caniuse.com/#search=object-fit Commentaire de krys

Répondre

#4 

Merci pour ce petit rappel, j’utilise souvent le site Can I Use Commentaire de Djb

Répondre

Écrire un commentaire