Un bloc de taille adaptable

**pal_crystal** · 02/07/2014, 10h02

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 :

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
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

**SylvainPV** · 02/07/2014, 10h47

Je reformule :

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

soit en code:

Code :

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

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";

**pal_crystal** · 02/07/2014, 17h35

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.

**SylvainPV** · 03/07/2014, 00h02

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.

**pal_crystal** · 03/07/2014, 17h09

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

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

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

**Watilin** · 03/07/2014, 17h47

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 :

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

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

**SylvainPV** · 07/07/2014, 00h33

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 :

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

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é.

Un bloc de taille adaptable

JavaScript

Discussions similaires

Partager

Partager