[筆記] 解決 Chart.js Canvas 元素造成的水平滾軸問題 @地瓜大的飛翔旅程

章節連結

由於 canvas 物件擁有兩種寬高 ( canvas.width, canvas.height ) 和 (css.width, css.height)。因此外部 css 限制寬高，其 canvas 本體是有可能直接無視，進而導致水平滾軸出現。這邊筆記下解決方法。

內容

如下列的 html

<div style="width: 400px;">
  <canvas width="600" height="400"></canvas>  <!-- 內部尺寸較大 -->
</div>

</div>

由於上述的內部尺寸較大，導致你所設置的寬度直接被無視，所以水平軸就出現了。

解法也很簡單，只要在 canvas 物件上，下 max-width: 100% 即可。這樣一來 canvas 物件的縮放就會尊重外部的 css 寬度限制

按讚加入粉絲團