Un bloc de taille adaptable

Version imprimable

Bonjour,

Je sais que ma demande est assez tricky mais peut-etre pourrez vous m'aider.
Voila ce que j'essaie de faire :
un bloc tel que:
-sa hauteur soit égale à 21/12 fois sa largeur.
-sa hauteur soit toujours égale à 100% de la hauteur de la fenetre si la largeur de la fenetre est assez grande pour garder ma proportion 21/12, sinon la largeur du bloc est celle de la fenetre et sa hauteur 21/12 fois sa largeur.

voila le code que j'ai donc pondu mais le cas en vert ne fonctionne pas.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 function height(bloc){ var hauteur; var largeur; if ( typeof(window.innerHeight) == 'number' ) hauteur = window.innerHeight; else if ( document.documentElement && document.documentElement.clientHeight ) hauteur = document.documentElement.clientHeight; if ( typeof(window.innerWidth) == 'number' ) largeur = window.innerWidth; else if (document.documentElement && document.documentElement.clientWidth ) largeur = document.documentElement.clientWidth; if (hauteur >= hauteur * 12/21){ document.getElementById(bloc).style.height = hauteur+"px"; document.getElementById(bloc).style.width = hauteur*12/21+"px"; } else if (hauteur < hauteur * 12/21){ document.getElementById(bloc).style.width = largeur+"px"; document.getElementById(bloc).style.height = largeur*21/12+"px"; } } window.onload = function(){height("mytable")}; window.onresize = function(){height("mytable")};
Toute aide est la bienvenue, MERCI

Je reformule :

hauteur = 100%
largeur = 12/21 * hauteur
si largeur > 100%, largeur = 100% et hauteur = 21/12 * largeur

soit en code:
Code:

1 2 3 4 5 6 7 8 9 10 11 var hauteur = window.innerHeight; var largeur = 12/21 * hauteur; if(largeur > window.innerWidth){ largeur = window.innerWidth; hauteur = 21/12 * largeur; } var bloc = document.getElementById(bloc); bloc.style.width = largeur+"px"; bloc.style.height = hauteur+"px";

02/07/2014, 17h35
pal_crystal

Alors, tout d'abord merci.

T'as bien compris ce que je veux et ton code est bien plus clair que le mien.

par contre lorsque je diminue la fenêtre pour avoir une petite largeur, j'ai toujours le même problème, les ascenseurs apparaissent.
03/07/2014, 00h02
SylvainPV

J'ai mis une démo ici : http://jsbin.com/gibepane/1/edit?html,js,output

Ça a l'air de marcher. Tu es sûr que les ascenseurs ne proviennent pas d'un padding ou de bordures qui viennent s'ajouter aux valeurs de largeur/hauteur ? Essaie box-sizing:true sur le bloc.
03/07/2014, 17h09
pal_crystal

Ca marche en partie sur jsbin et encore ça bug pour une certaine largeur(autour de 307)

http://img4.hostingpics.net/thumbs/mini_424328wrong.png

Et sur firefox, le redimensionnement en largeur ne marche jamais :/

http://img4.hostingpics.net/thumbs/m...6332wrong2.png

la propriété boz-sizing ne change rien et ce n'est pas un problème de padding ou de bordure.

Si t'as d'autres idées n'hésite pas ;)

Merci
03/07/2014, 17h47
Watilin
Salut,

pour ma part je propose de calculer d'abord le ratio de l'écran (ratio = largeur / hauteur), pour savoir quelle dimension (largeur ou hauteur) va « dépasser ». Si le ratio d'écran est supérieur à 7/4 (= 21/12), c'est la hauteur qui dépasse, sinon c'est la largeur.

Il faut donc corriger la dimension qui dépasse en lui donnant 100% de la dimension écran, et adapter l'autre dimension avec une de ces deux formules :
Code:

1 2 largeur = hauteur * ratio hauteur = largeur / ratio
Edit: les ascenceurs, c'est peut-être à cause des marges du <body>. C'est con à dire, mais on n'y pense pas toujours ;)
07/07/2014, 00h33
SylvainPV

Non ce n'est pas un bug, mais c'est bien issu d'une mauvaise configuration CSS. Dans le cas présent, ce n'est pas le margin et le padding qui est en cause mais le contenu texte qui pose problème, et ce n'est pas box-sizing qu'il te faut mais quelque-chose comme

Code:

word-break: break-all;

; à vérifier si c'est bien le comportement que tu désires, cela pose problème seulement quand un mot occupe plus d'une ligne de texte.

Et sur firefox ça marche impeccable de mon côté.