製作隨網頁容器大小改變的 canvas 區塊

分享:

如果在網頁上有用到 canvas,又希望這個區塊可以隨著頁面大小做 RWD 變化的換,可以搭配使用 CSS 的 object-fit 屬性。

像我這邊就利用 bootstrap 的固定比例區塊再把 canvas 放進去,並希望 canvas 可以隨著區塊大小變化時跟著改變。

<div class="ratio ratio-4x3">
  <div class="canvas-wrap">
    <canvas class="cover-fit" id="canvas" width="100%" height="100%"></canvas>
  </div>
</div>

 

我設定了一個 cover-fit 的 CSS 樣式,並透過 object-fit 去設定如下:

.cover-fit{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

這樣 canvas 就可以隨區塊大小變化了。

課程推薦

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。