object-fit - Propriété CSS
Résumé des caractéristiques de la propriété object-fit
fill
| contain
| cover
| scale-down
| none
fill
object-fit
passe d'une valeur à l'autre sans transition.Description de la propriété object-fit
.
object-fit
définit comment doit être coupé ou redimensionné un élément par rapport aux dimensions qui lui sont imposées.
Cette propriété s'applique aux images ou aux vidéos.
Elle permet d'éviter les déformations qui se produisent lorsque le ratio entre la largeur et la hauteur imposées
est différent du ratio de l'image ou de la vidéo original.
Pour que la propriété object-fit
soit opérationnelle, il faut lui imposer des dimensions différentes de ses dimensions natives.
Valeurs pour object-fit
.
object-fit:
;
- object-fit: fill;
L'image ou la vidéo est dimensionnée en fonction de la largeur et de la hauteur définie, même si cela provoque une distorsion (ratio largeur/hauteur différent de celui de l'image originale).
- object-fit: contain;
L'image ou la vidéo est rétrécie ou agrandie pour qu'elle soit entièrement visible tout en conservant son ratio, donc sans provoquer de distorsion. Si le ratio largeur/hauteur est différent de celui de l'image originale, des marges seront visibles.
- object-fit: cover;
L'image ou la vidéo est dimensionnée pour emplir la place imposée, sans changement de ses proportions. Si le ratio largeur/hauteur est différent de celui de l'image originale, des parties seront coupées.
- object-fit: none;
L'image ou la vidéo est affichée dans ses dimensions originales, sans distorsion. L'image ou la vidéo peut être coupée ou ne pas emplir entièrement l'espace disponible.
- object-fit: scale-down;
L'image ou la vidéo est rétrécie (si nécessaire) pour la faire tenir en entier dans l'espace disponible, sans la déformer. Si le ratio largeur/hauteur et différent de celui de l'image originale, des marges seront visibles.
La différence avec
contain
est quescale-down
ne peut que réduire l'image ou la vidéo alors quecontain
peut aussi l'agrandir si c'est nécessaire. - object-fit:
initial
; object-fit:inherit
; object-fit:revert
; object-fit:revert-layer
; object-fit:unset
;La valeur initiale est :
.fill
Animation de la propriété object-fit
.
L'image ci-dessous a été dimensionnée à 300 pixels de large et 150 pixels de haut, soit un ratio de 2,
qui ne correspond pas à son ratio original.
L'animation de object-fit
fait défiler les valeurs fill
, contain
et cover
.
Simulateur.
Ce simulateur vous permet de visualiser l'effet de la propriété object-fit
.
On a imposé à cette image une largeur de 400 pixels et une hauteur de 100 pixels, soit un ratio de 4.
Ce qui est très loin du ratio original de l'image : elle mesure 300 pixels x 150 pixels, soit un ratio de 2.
Ces dimensions imposées sont visualisées par la bordure gris clair.
Observez comment la valeur donnée à object-fit
adapte les dimensions de l'image en la déformant ou non.
Prise en charge par les navigateurs (compatibilité).
On observe une bonne compatibilité de tous les navigateurs pour ce qui est du traitement de object-fit
,
sauf pour Internet Explorer, mais c'est un navigateur assez ancien, qui est maintenant peu utilisé.
object-fit
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que object-fit
.
Les spécifications CSS éditées par le W3C sont organisées en modules. object-fit
fait partie du Module CSS - Images (CSS Images Module). Les définitions suivantes sont également décrites dans ce même module.