Bonjour, je me demandais si il y avait un moyen 100% css pour définir une hauteur (height) en fonction de la largeur (width), par exemple la hauteur ferait 75% de la largeur ?
Merci.
Bonjour, je me demandais si il y avait un moyen 100% css pour définir une hauteur (height) en fonction de la largeur (width), par exemple la hauteur ferait 75% de la largeur ?
Merci.
Bonjour,
si ta largeur est fixe alors tu peux passer par une variable CSS et utiliser la fonction calc pour définir ta hauteur.
Ressources :
Hello,
Suivant la finalité, un moyen un peu détourné serait de jouer avec le padding vertical qui, exprimé en %, se réfère à la largeur:
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 <!DOCTYPE html> <html lang="fr"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>titre</title> <style> div { background-color:red; padding:75% 0 0 0; } </style> </head> <body> <div></div> </body> </html>
Attention toutefois lorsque exprimé en pourcentage, ce pourcentage est calculé par rapport à la largeur du bloc conteneur, dans ton exemple donc par rapport au <body>.
↪ 8.4 Padding properties
Le problème c'est que je n'ai pas de largeur fixe, celle ci s'adaptant à l'écran, j'ai juste 100% (contenant) pour la largeur.
Merci pour vos réponses.
Dans ce cas la solution de Candygirl peut être jouable, sinon il va te falloir avoir recours au JavaScript.
Bonjour,
1- une autre solution full CSS (maisun peutrès capillotractée !) :
- on met une image à la proportion voulue (de préférence transparente). Ici, 4x3 pixels (suffisent) *
- et un div en absolu par dessus
* voir https://fakeimg.pl/ (merci NoSmoking )
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10 <div class="formate"> <img src="https://fakeimg.pl/4x3/" /> <div> Lorem Ipsum est un générateur de faux textes aléatoires. <br/> Vous choisissez le nombre de paragraphes, de mots ou de listes. Vous obtenez alors un texte aléatoire que vous pourrez ensuite utiliser librement dans vos maquettes. <br/> Le texte généré est du pseudo latin et peut donner l'impression d'être du vrai texte. </div> </div>
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 .formate { position:relative; overflow:auto; background:yellow; /* pour TEST */ max-width:800px; /* pour TEST */ } .formate > img { width:100%; visibility:hidden; /* on masque */ } .formate > div { position:absolute; top:0; left:0; }
Exemple : https://codepen.io/jreaux62/pen/WNbBpbv
2- Cela dit, je suis plutôt partisan de la solution JS.
Dernière modification par Invité ; 30/01/2020 à 17h43.
@jreaux62 :
C'est effectivement une solution en ajoutant un élément supplémentaire qui respecte le ratio.1- une autre solution full CSS (maisun peutrès capillotractée !) :
Pour les images dimensionnées il existe : Fake images please?
@stc074 :
Peut-être devrais tu nous en dire plus sur ce que tu cherches à réaliser et éventuellement nous fournir une structure de test.
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Partager