06 June 2017 12:45
CSS - Conserver le ratio 16/9 des images fullscreen et vidéos - Alsacreations
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
1
(1 marks)
