Ajuster un canvas à la taille de la div qui le contient

**billybobbonnet** · 16/07/2014, 21h52

Hello,

J'ai une page divisée en 6 div disposées en mosaique à l'aide du css. J'ai proportionné l'emplacement des div selon la taille de la page comme ci dessous:

Code :

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

1
2
3
4
5
6
7
8
html, body { height:100%; margin:0; padding:0 }
div { position:fixed; width:33%; height:50% }
#NW { top:0;   left:0;  }
#NE { top:0;   left:33%;  }
#SW { top:0%; left:66%;    }
#WD { top:50%; left:0%;     } 
#ND { top:50%;   left:33%;   }
#SD { top:50%; left:66%;   }

Dans chaque div, j'ai un canvas. Comment est-ce que je peux redimensionner les canvas pour qu'ils s'adaptent à la taille des div? Je précise que je ne veux pas un stretch, mais plutôt un remplissage en proportion. En gros, la hauteur du canevas sera égale à celle du div quand la largeur sera plus petite ou égale, ou inversement.

Si la question est naive, désolé, je suis un grand débutant.

Par avance, merci!

**darkstar123456** · 19/07/2014, 11h02

Bonjour,

Votre question n'est pas très compréhensible. Vous devriez également fournir votre code HTML afin que nous vous aidions.
Faites également attention aux mots "canvas" et "canevas". "canvas" existe en tant que balise HTML et permet de faire des choses très particulières.

Et ceci ne veut rien dire :

la hauteur du canevas sera égale à celle du div quand la largeur sera plus petite ou égale, ou inversement.

Est-ce que ça signifie que vous souhaitez que votre hauteur fasse toujours 100% du div, peu importe sa largeur ?

Quoi qu'il en soit, soyez plus clair & précis svp, et fournissez-nous votre code HTML ;-)

**billybobbonnet** · 19/07/2014, 11h58

Je reprends. Voilà le code html + css

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>My page</title>
      <script src="js/Chart.js"></script>
	<style type="text/css">
html, body { height:100%; margin:0; padding:0 }
div { position:fixed; width:33%; height:50% }
#NW { top:0;   left:0;  }
#NE { top:0;   left:33%;  }
#SW { top:0%; left:66%;    }
#WD { top:50%; left:0%;     } 
#ND { top:50%;   left:33%;   }
#SD { top:50%; left:66%;   }
</style>
</head>
 
<body>
<script>
<!-- ici je déclare les données et instancie les graphiques qui vont dans chaque canvas -->
</script>
 
<div id="NW">
<canvas id="pie"/>
</div>
<div id="NE">
<canvas id="donut" />
</div>
<div id="SW">
<canvas id="canvas" ></canvas>
</div>
<div id="WD">
<canvas id="radar" ></canvas>
</div>
<div id="ND">
<canvas id="polar" /></div>
<div id="SD">
<canvas id="line" ></canvas>
</div>
</body>
</html>

Le ratio hauteur largeur n'est pas le même en fonction des types de graphiques. Certains font 1:1 d'autres 2:1, etc. Ils sont proportionnés, donc si je les "stretche" dans la div, ils vont apparaître déformés.
Comme la taille des div qui contiennent les canvas est à proportion de celle de la page (changeante, donc) je souhaite ajuster la taille de mes canvas (qui contiennent les graphiques) pour qu'ils soient les plus grands possibles sans les déformer.

Exemple concret:

Mon graphique a un ratio H:L de 100:200. Ma div fait 300:400. Je veux que le canvas fasse 200:400. Si la div faisait 300:200, mon canvas serait dimensionné 100:200. Le but est de lui donner la taille maximum sans le déformer.