05-03-2019, 10:41 AM
Il m'est avis déjà que "cover" n'est pas ce que tu cherches: l'image sera croppée si le container n'est pas du bon ratio. C'est plutôt "contain" que tu voudrais.
Ceci mis à part, ton background, tu le fous à 100% 100% de son container (donc pas de ratio au niveau du background, c'est le conteneur qui fixera le ratio: pas de cover ni de contain du coup), puis tu fous ton container à width:100vw (par exemple, pour couvrir la pleine largeur) et son height tu le fous à Xvw de sorte que X = 100 / ratio de l'image (aka pour 16/9e de ratio d'image, pas d'écran hein on s'en balek, X = 100 * 9/16 => X = 56.25 => height: 56.25vw.
Après, tu mets ce container en "position: relative" et tu peux placer des éléments dedans en position: absolute, et en % (ie: placer un élément au centre de l'image = position:absolute; left: calc(50% - largeur de l'élément / 2); top: calc(50% - hauteur de l'élément / 2);
Je pense qu'on devrais déplacer çà dans un topic à part d'ailleurs, si cela te convient, je le ferai.
Ceci mis à part, ton background, tu le fous à 100% 100% de son container (donc pas de ratio au niveau du background, c'est le conteneur qui fixera le ratio: pas de cover ni de contain du coup), puis tu fous ton container à width:100vw (par exemple, pour couvrir la pleine largeur) et son height tu le fous à Xvw de sorte que X = 100 / ratio de l'image (aka pour 16/9e de ratio d'image, pas d'écran hein on s'en balek, X = 100 * 9/16 => X = 56.25 => height: 56.25vw.
Après, tu mets ce container en "position: relative" et tu peux placer des éléments dedans en position: absolute, et en % (ie: placer un élément au centre de l'image = position:absolute; left: calc(50% - largeur de l'élément / 2); top: calc(50% - hauteur de l'élément / 2);
Je pense qu'on devrais déplacer çà dans un topic à part d'ailleurs, si cela te convient, je le ferai.