Discussion :

[benji07]

Bonjour,
Je souhaiterais créer une iframe qui a une taille de 100% en largeur, et qui respecte le format 4/3 des écrans.
Je penser le faire en javascript, mais je ne vois pas comment.

Pour info, j'utilise jQuery, mais je peut très bien m'en passer pour ce problème

[Matthieu2000]

width="100%"

?

[benji07]

mais je voudrais un height qui soit de (width/4)*3

[Auteur]

mais je voudrais un height qui soit de (width/4)*3

tu viens de répondre à la question Puisque le width est en pourcent, mets le height en % également
height = (width*3/4) + "%" (75%)

[benji07]

Oui mais non, car le % c en fonction de l'element conteneur

mais sinon j'ai résolu en faisant comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
editor.find('iframe').width('100%');
setTimeout(function(){
   editor.find('iframe').height((editor.find('iframe').width()/4)*3);
},0);

Maintenant il faut que l'iframe ce redimensionne lors du redimensionnement de la fenêtre

[Auteur]

Oui mais non, car le % c en fonction de l'element conteneur

et alors ? un truc m'échappe

Maintenant il faut que l'iframe ce redimensionne lors du redimensionnement de la fenêtre

voir l'événement onresize

[benji07]

Avec un onresize ça marche

Par exemple, lorsque mon iframe fait 640px de largeur, je voulais qu'elle fasse 480px de hauteur, mais si tu redimensionne ça ne change que la largeur et pas la hauteur.

Avec ce code ça fonctionne, mon iframe a toujours un ratio de 4/3

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
$(window).resize(function(){
  editor.find('iframe').height((editor.find('iframe').width()/4)*3);
});