Comment mettre un ratio entre HEIGHT et WIDTH pour un bloc DIV ?

Bonjour et merci pour cet excellent forum.

Je cherche à créer un DIV étirable en % mais dont la valeur HEIDTH soit un ratio de la valeur WIDTH du même DIV.

Mon bloc doit toujours avoir un rapport 4/3 sachant que ma valeur WIDTH est à 100%

Exemple : Si mon bloc est dans une fenêtre de 320px (WIDTH) sur 650px (HEIGHT). La taille de mon bloc devra être de 320px (100% de WIDTH) et de 240px (4/3 de 320px de mon WIDTH).

Si j'agrandi la fenêtre uniquement en horizontale à 480px, mon bloc devra se redimentionner en vertical à 360px (4/3 de 480px), même si ma fenêtre a toujours une taille HEIGHT de 650px.

J'ai pensé aux expressions CSS mais c'est compatible uniquement pour IE... et j'ai tenté en JS mais je préfèrerai éviter. Je cherche une solution uniquement en CSS si ca existe compatible IE, FIREFOX et SAFARI


J'ai été très sage et j'ai cherché partout sans succès. Merci pere noel

SamBeckett a écrit :
Je cherche à créer un DIV étirable en % mais dont la valeur HEIDTH soit un ratio de la valeur WIDTH du même DIV.

[...]

Je cherche une solution uniquement en CSS si ca existe compatible IE, FIREFOX et SAFARI .

Très simple : ça n'existe pas en CSS.
Il y a peut-être quelque chose à faire en Javascript pour fixer la hauteur en fonction de la largeur du bloc. Mais en CSS c'est tout simplement impossible.

Effectivement, cela est (pour l'instant) impossible en css.

En javascript, je te conseillerai une fonction sur le onload où :

var width = document.getElementById['tadiv'].style.width;
document.getElementById['tadiv'].style.height = width * (40/100);

Si je suis pas trop mauvais en math, au chargement de ta page, ta div fera en hauteur 40% de ta largeur.
Bien sûr, le javascript n'est pas à mettre comme ça, c'est juste une piste.

Si je dis des conneries, je m'excuse d'avance.

Merci pour vos réponses, c'est clair au moins ca m'evitera de chercher encore longtemps.

Et vous savez si les expressions dans les CSS seront supportées dans les autres navigateurs ? car pour l'instant seul IE le fait. Et je pense que l'on pourrait faire ce que je cherche avec.

Mais bon en attendant, je vais me rabattre sur le javascript. Je vous tiens au courant si j'y arrive. Encore merci!

SamBeckett a écrit :

J'ai pensé aux expressions CSS mais c'est compatible uniquement pour IE...
...
...et j'ai tenté en JS mais je préfèrerai éviter.

sauf erreur les expressions CSS sont justement du javascript.