Div { width:100% ; height:"66% de width"; } ?

Résolu/Fermé
jemsss Messages postés 188 Date d'inscription jeudi 28 août 2008 Statut Membre Dernière intervention 28 novembre 2019 - 11 août 2013 à 15:43
 Neophyse - 28 mai 2015 à 16:06
Bonjour,
Existe-t-il une astuce en CSS pour rendre la hauteur d'un bloc proportionnelle à sa largeur.
Autrement dit, que height soit toujours égal xx% de width, quelque soit la largeur de width.
Il me semble pas mais je pose la question au cas où.
Sinon j'utiliserai javascript...
Merci d'avance

4 réponses

TheLoulou11 Messages postés 1 Date d'inscription dimanche 16 février 2014 Statut Membre Dernière intervention 16 février 2014 9
Modifié par TheLoulou11 le 16/02/2014 à 08:46
Tu mets ce que tu veux dans une div avec ce css :
.ta_div {
width: 100%
height: 0;
padding-top: 50%;
}


Ta div aura toujours pour hauteur la moitié de sa largeur.
Même si j'ai répondu un tard, j'espère aider certaines personnes.
8
Stanislas Poisson Messages postés 424 Date d'inscription samedi 1 décembre 2012 Statut Membre Dernière intervention 22 mai 2018 66
11 août 2013 à 16:14
Regarde cette video de grafikart, il explique comment mettre une viideo en responsive, cela correspond aussi a ce que tu veux faire

https://www.grafikart.fr/tutoriels/video-iframe-responsive-385
6
Utilisateur anonyme
11 août 2013 à 16:21
pas mal la vidéo ^^
0
jemsss Messages postés 188 Date d'inscription jeudi 28 août 2008 Statut Membre Dernière intervention 28 novembre 2019 17
11 août 2013 à 17:04
Merci Stanislas,
C'est exactement cela :)
Cool cette astuce. Espérons que ça marche sur tous les navigateurs...
0
Stanislas Poisson Messages postés 424 Date d'inscription samedi 1 décembre 2012 Statut Membre Dernière intervention 22 mai 2018 66
11 août 2013 à 17:34
le padding etant un element css 2.1 voir un element css 1, normalement tous les nav le comprenne.
0
Parfait merci pour cette astuce !!
0
jemsss Messages postés 188 Date d'inscription jeudi 28 août 2008 Statut Membre Dernière intervention 28 novembre 2019 17
11 août 2013 à 16:21
Effectivement, width:100% était pour l'exemple et la plupart du temps c'est inutile.

Par contre dans ton exemple, height sera toujours à 40% de la hauteur du bloc parent si celle-ci est spécifiée, mais il ne sera pas à 40% de la largeur width. Selon la largeur de la fenêtre, la largeur du bloc s'adaptera mais la hauteur sera toujours la même, or je souhaite que la hauteur soit proportionnelle à la largeur...
0
Utilisateur anonyme
11 août 2013 à 16:22
tu as raison autant pour moi , j'ai parlé trop vite
0
tierez68 Messages postés 1 Date d'inscription mardi 3 février 2015 Statut Membre Dernière intervention 3 février 2015
3 févr. 2015 à 13:17
Bonjour, tu trouve http://l4.yt/integrateurweb la réponse sur http://coin.des.experts.pagesperso-orange.fr/reponses/faq9_49/taille.html
0