Définir une hauteur en fonction de la largeur

**stc074** · 08/01/2020, 04h38

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.

**NoSmoking** · 08/01/2020, 08h08

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 :

↪ Les variables CSS (sur MDN)
↪ La fonction calc() (sur MDN)

**Candygirl** · 24/01/2020, 16h11

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>

**NoSmoking** · 25/01/2020, 10h03

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

**stc074** · 27/01/2020, 00h18

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.

**NoSmoking** · 27/01/2020, 11h41

Dans ce cas la solution de Candygirl peut être jouable, sinon il va te falloir avoir recours au JavaScript.

Invité · 29/01/2020, 09h45

Bonjour,

1- une autre solution full CSS (mais ~~un peu~~ trè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.

**stc074** · 30/01/2020, 01h51

Envoyé par NoSmoking

Dans ce cas la solution de Candygirl peut être jouable, sinon il va te falloir avoir recours au JavaScript.

oui je vais essayé ça !

**stc074** · 30/01/2020, 02h42

Envoyé par Candygirl

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:

Salut, j'ai essayé avec un padding: 12% 0 12% 0; pour avoir une hauteur de 75% par rapport à la largeur, mais n'aie pas obtenu le résultat escompté (on dirait que ça me met 12% de la hauteur du contenu). Merci.

**NoSmoking** · 30/01/2020, 17h27

@jreaux62 :

1- une autre solution full CSS (mais ~~un peu~~ très capillotractée !) :

C'est effectivement une solution en ajoutant un élément supplémentaire qui respecte le ratio.

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.

Définir une hauteur en fonction de la largeur

Dimensionnement en CSS

Discussions similaires

Partager

Partager