28172 sujets

CSS et mise en forme, CSS3

Largeur égale a ratio image

Bonjour

Je n'arrive pas a attribuer à un bloc div une largeur étant égale à la largeur d'une image.
Les paramètre sont : un header (35px de haut) en fixed, et une image en 100vh (100vh - 35px) qui est en 2/3 de ratio.

Je pensais pouvoir faire ce calcul à partir d'un opération mathématique, mais je ne sais pas comment faire. Quelque chose du type width:calc(100vh - (2/3) * 100% - (....)......) où quelque chose comme ça.

Je pourrais le faire en Javascript mais le window.resize donne un temps de latence entre le moment où le navigateur est redimensionné et le calcul, moins efficace qu'une ligne CSS. Sachant que le header est en fixed, plus de relation au parent possible, donc je ne sais pas comment faire.

https://jsfiddle.net/0nvjbbz8/

Toutes propositions sera la bienvenue
Bonsoir.

Je ne suis pas sûre d'avoir tout saisie : vous fixez la hauteur de l'image, vous connaissez le ratio de l'image, vous voulez reporter la largeur de l'image qui en résulte sur une div placée en position : fixed ?
Le calcul de la largeur du header n'est-il pas :
width : calc((100vh - 35px) * 3/2);

?
Smiley smile
C'est exactement ça merci ! Je suis vraiment nul en math et j'avais du mal à comprendre la logique.

Une dernière chose, est-il possible également de calculer le reste de l'écran quand l'image est visible (marge blanche à gauche dû au 3/2), c-a-d quand l'image touche le bord de l'écran.

De cette manière, j'aimerai desactiver le height: calc(100vh - 35px) de l'image pour la mettre a "auto" avec un media querie du type :

@media only screen and (max-width:calc(((100vh - 35px) * 3/2) - 100vw - voudoo mathematique...???))


en gros : (largeur de l'image 2/3) - 100vw = lorsque l'image est au bord de l'écran...
Modifié par Oziris (29 Jun 2017 - 00:27)
Modérateur
hahaha y'a clairement un truc à revoir au niveau solution pour faire ce que tu veux faire.
Ça a l'air tellement compliqué ça pue l'overkill !!! Smiley lol
Sujet clos
Aller à