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.

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

Explications :

  • 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 : Site officiel