IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Définir une hauteur en fonction de la largeur


Sujet :

Dimensionnement en CSS

  1. #1
    Membre averti
    Avatar de stc074
    Homme Profil pro
    Codeur du dimanche
    Inscrit en
    janvier 2009
    Messages
    997
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Lozère (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Codeur du dimanche

    Informations forums :
    Inscription : janvier 2009
    Messages : 997
    Points : 405
    Points
    405
    Billets dans le blog
    1
    Par défaut Définir une hauteur en fonction de la largeur
    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.

  2. #2
    Modérateur
    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 453
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 453
    Points : 38 550
    Points
    38 550
    Par défaut
    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)

  3. #3
    Membre émérite Avatar de Candygirl
    Femme Profil pro
    Inscrit en
    juillet 2006
    Messages
    1 912
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 49
    Localisation : Suisse

    Informations forums :
    Inscription : juillet 2006
    Messages : 1 912
    Points : 2 895
    Points
    2 895
    Par défaut
    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>
    Les bons réflexes:
    • avant de poser une question:
      règles | faq | tutoriels | recherche
    • clarté, politesse, vocabulaire et orthographe soignés = efficacité
    • remercier ceux qui ont pris le temps d'aider et si c'est le cas

  4. #4
    Modérateur
    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 453
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 453
    Points : 38 550
    Points
    38 550
    Par défaut
    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

  5. #5
    Membre averti
    Avatar de stc074
    Homme Profil pro
    Codeur du dimanche
    Inscrit en
    janvier 2009
    Messages
    997
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Lozère (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Codeur du dimanche

    Informations forums :
    Inscription : janvier 2009
    Messages : 997
    Points : 405
    Points
    405
    Billets dans le blog
    1
    Par défaut
    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.

  6. #6
    Modérateur
    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 453
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 453
    Points : 38 550
    Points
    38 550
    Par défaut
    Dans ce cas la solution de Candygirl peut être jouable, sinon il va te falloir avoir recours au JavaScript.

  7. #7
    Invité
    Invité(e)
    Par défaut
    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.
    Dernière modification par Invité ; 30/01/2020 à 17h43.

  8. #8
    Membre averti
    Avatar de stc074
    Homme Profil pro
    Codeur du dimanche
    Inscrit en
    janvier 2009
    Messages
    997
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Lozère (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Codeur du dimanche

    Informations forums :
    Inscription : janvier 2009
    Messages : 997
    Points : 405
    Points
    405
    Billets dans le blog
    1
    Par défaut
    Citation Envoyé par NoSmoking Voir le message
    Dans ce cas la solution de Candygirl peut être jouable, sinon il va te falloir avoir recours au JavaScript.
    oui je vais essayé ça !

  9. #9
    Membre averti
    Avatar de stc074
    Homme Profil pro
    Codeur du dimanche
    Inscrit en
    janvier 2009
    Messages
    997
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Lozère (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Codeur du dimanche

    Informations forums :
    Inscription : janvier 2009
    Messages : 997
    Points : 405
    Points
    405
    Billets dans le blog
    1
    Par défaut
    Citation Envoyé par Candygirl Voir le message
    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.

  10. #10
    Modérateur
    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 453
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 453
    Points : 38 550
    Points
    38 550
    Par défaut
    @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.

Discussions similaires

  1. [MySQL] redimensionner la hauteur d'une image en fonction de sa largeur
    Par hichamdeb dans le forum PHP & Base de données
    Réponses: 2
    Dernier message: 24/09/2010, 02h54
  2. Réponses: 6
    Dernier message: 23/09/2010, 19h40
  3. Définir une section en fonction d'une autre
    Par mekatxis dans le forum Webi
    Réponses: 4
    Dernier message: 24/08/2010, 15h16
  4. Réponses: 6
    Dernier message: 03/04/2007, 17h19
  5. définir une hauteur de table dans un css avec ie et mozilla
    Par regis68 dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 17/01/2006, 22h28

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo