Conserver le ratio 16/9 des images fullscreen et vidéos

Astuce par (Designer Web & Mobile spécialisée en UI and UX design, Partout dans le monde :))
Créé le , mis à jour le (33591 lectures)
Tags : image, vidéo, 16/9, aspect-ratio, ratio

Jusqu'il y a quelques temps, si vous vouliez utiliser des images en CSS ou des vidéos en iframe qui gardaient leur joli ratio 16:9 et prennaient toute la taille du navigateur quand on redimensionne, il fallait passer par le bon vieux hack du "ajoute un wrapper autour et colles lui un padding-bottom de 56.25%".
Rien de plus simple et logique, n'est-ce pas ? Tellement simple et logique que certains en ont fait un plugin de redimension automatique de vidéo ou un site pour hacker automatiquement les inclusions d'iframes. Bref, c'est de la bidouille à base de gros coups de hack, de wrapper et autres joyeusetés.

Avec l'arrivée des unités de viewport, compatibles depuis IE9, nous allons pouvoir faire des choses assez sympathiques. 

Garder le ratio 16:9 d'images fullscreen en CSS 

Attention, ce qui suit est du code expérimental avec des unités de viewport, pour le moment ce n'est pas supporté partout et et à utiliser uniquement si vous souhaitez une image fullscreen. Les images ne s'aggrandissent pas si l'utilisateur zoom. A utiliser en connaissance de cause.
Ceci n'est PAS une technique de gestion de débordement d'images dans un container.

CSS image ratio de 16:9

Le but est ici de faire en sorte que l'image de fond que l'on aura placée en CSS conserve son ratio de 16/9 et prenne toute la taille du navigateur, quelle que soit la taille de ce dernier (aka fullscreen). Pratique quand on fait du responsive.

Voici le code utilisé : 

.ratio {
    background: url("monimage.jpg") no-repeat;
    background-size: cover;
    width: 100vw;  
    height: 56.25vw;
}  

Concrètement ce que l'on fait : 

  • on donne à l'image la largeur du navigateur grâce à l'unite vw (viewport-width)
  • on lui donne la hauteur à laquelle on a appliqué un ratio 16:9  calculé en faisant 100 * 9 / 16 de la largeur du navigateur

Voir le résultat en ligne

Garder le ratio 16:9 des vidéos en CSS

Le second cas d'utilisation est celui des vidéos.
Un iframe est plutôt flexible au final, donc on pourrait se dire que pour le redimensioner sur mobile, il suffirait d'y appliquer le même bon vieux hack que pour le débordement d'images, le désormais célèbre max-width:100%.

En théorie oui, en pratique, on perd le ratio de notre vidéo et ça nous donne un résultat pas super sympa comme ceci :

Video sans ratio

C'est là où encore une fois, mes unités de viewport et mon ratio viennent à la rescousse. 

Voici le code utilisé : 

@video-width: 780px;

iframe {  
  width: 100vw; 
  max-width: @video-width;
  height: 56.25vw;    
}

@media (min-width:@video-width) {
  iframe {
    height: calc(@video-width * 0.5628205128205128);
  }
}

Là, c'est un poil plus compliqué, parce que j'ai ajouté un peu de préprocesseur LESS pour rendre le tout plus flexible. Voici l'explication en français dans le texte : 

  • on définit une variable qui va contenir la taille que je souhaite donner à la vidéo (encore une fois, pas obligatoire, c'est juste pour aller plus vite)
  • on donne à mon iframe une largeur maximale de la taille de ma vidéo (ici 780px)
  • on applique le même code pour la hauteur que pour les images avec mon ratio 16:9
  • l'astuce ici, si la taille du navigateur est plus grande ou égale à la taille de ma vidéo, on donne à la vidéo une hauteur fixe calculée à partir de sa propre largeur affichée à laquelle on a encore une fois appliqué le ratio (donc 780 * 9 / 16). Ceci en employant la fonction calc().

Voir le résultat en ligne

Et si mon ratio n'est pas de 16/9 ?

Ah ben oui mais si vous ne faites pas comme tout le monde on n'y peut rien ! Plus sérieusement, il suffit tout simplement d'adapter la valeur de height selon la valeur de votre ratio.

Concrètement cela donne ceci :

ratio d'image valeur de height
16/9 56.25vw
16/10 62.5vw
4/3 75vw

Pour finir, je vous renvoie au support de viewport units, mais en résumé, ça marche plutôt pas mal depuis IE9.

Vous pouvez également jeter un oeil à un précédent article Une vidéo en arrière plan sur toute la page.

Ressources

Commentaires

fanny95 a dit le

Merci Stephanie ! J'adore ton article, il m'est d'une grande aide !

spongebrain a dit le

Excellente astuce que je garde bien au chaud ! Conserver les proportions homothétiques est un élément clé du design. Merci Stéphanie :-)

fanny95 a dit le

Je viens de tester en live, et chez moi, ca me met une largeur un peu plus grande que la fenêtre de mon navigateur. Du coup j'ai du change la width par 100%. Mais a part ça, ça marche niquel =D Merci Steph!

Stéphanie W. a dit le

@fanny95 : quel navigateur ? Etrange parce que justement avec Raph on avait résolu le souci des scrollbars :)
Par contre widht:100% attention si t'ajoutes du padding (remarque ton bug vient peut-être de là aussi de base)

Raphael a dit le

fanny95 a dit le

@Stephanie C'est sur Firefox, mais a voir la version demo que j'avais faites, il n'y avait aucun soucis. Et quand j'ai voulu le mettre en pratique sur mon site en local (j'utilise Firefox) j'ai eu un soucis avec un scroll horizontal (padding et margin a 0). Ca doit venir de ma feuille CSS donc.
@Raphael : Merci pour le lien ;) ahah. Je vais regarder ca de suite

Stéphanie W. a dit le

@fanny95 : regarde dans le codepend il y a une astuce sur html pour éviter ça :)