| layout | title |
|---|---|
page |
Mise en page |
Pour les images placées en "Background" via CSS, il est possible de préciser la taille avec deux mots-clés
cover: masquage partiel de l'image, pour remplir entièrement le cadre, sans déformation.contain: essaie de remplir le cadre tout en gardant toute l'image visible, en la rapetissant s'il le faut.
Un exemple de code qui applique une image de fond:
.bg {
background-image: url("https://1904.cc/i/clouds.jpg");
background-size: cover;
background-repeat: no-repeat;
}See the Pen CSS Background by Manuel Schmalstieg (@eracom) on CodePen.
La propriété object-fit permet d'appliquer le mode "cover" ou "contain" sur des images ou vidéo dans le HTML (qui ne sont pas chargées par la propriété "background-image").
Une propriété CSS longtemps attendue, qui permet de spécifier comment une image (ou vidéo) doit s'adapter à son conteneur.
Les valeurs possibles sont:
fill: déformation de l'image, pour remplir le cadre à tout prix.contain: essaie de remplir le cadre tout en gardant toute l'image visible, en la rapetissant s'il le faut.cover: masquage partiel de l'image, pour remplir entièrement le cadre, sans déformation.scale-down: l'image se rétrécit pour rentrer dans le cadre. Peut se comporter comme contain.none: comportement classique, affichage de l'image à taille réelle des pixels.
Exemples :
Exemple avec une même image, avec le mode cover, contain et fill.
See the Pen object-fit by Manuel Schmalstieg (@eracom) on CodePen.
<iframe width="100%" style="aspect-ratio: 16 / 9;" src="https://www.youtube-nocookie.com/embed/y65JkO8-QaQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>Dans l'épisode 4 de Debug TV, Adrien Cater explique les propriétés object-fit et aspect-ratio.