html - 如何使用 CSS 显示 :grid, 来定义内容大小而不是容纳它

Question

这Codepen说明了使用网格将页面分成 4 个相等的象限。每个象限都包含一个 Canvas 元素。在 Chrome 中启用“实验性 Web 平台功能”以使其工作。

目标是允许 Canvas 根据网格的大小和布局自行调整大小。HTML:

<div class="wrapper">
  <div class="box"><canvas></canvas></div>
  <div class="box"><canvas></canvas></div>
  <div class="box"><canvas></canvas></div>
  <div class="box"><canvas></canvas></div>
</div>

CSS:

html,
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
}

.wrapper { 
  height: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat( 2, 1fr );
  grid-template-rows: repeat( 2, 1fr );
}

.box {
  border: 2px solid #aaaaaa;
  border-radius: 5px;
}

JS:

const els = Array.from(document.querySelectorAll('.wrapper div'))
const drawCanvases = function (els) {
  els.forEach(el => {
    const can = el.querySelector('canvas')
    can.width = can.parentElement.clientWidth
    can.height = can.parentElement.clientHeight-4


    var ctx = can.getContext("2d")
    ctx.clearRect(0, 0, can.width, can.height)
    ctx.font = "30px Arial"

    var mx = can.width/2
    var my = can.height/2
    ctx.fillText(`${can.width}px, ${can.height}px`,mx,my)
  })
}

window.addEventListener('resize', e => {
  drawCanvases(els)
})

drawCanvases(els)

问题是，如果 Canvas 将其大小设置为上面的父 div 元素，那么网格将永远无法使列/行大小变小。试试 Codepen , 它在元素的中心显示 Canvas 大小 - 您可以拖动并使 Canvas 元素变大，但永远不能使它们缩小。

这是否可以在不手动重新计算我们应该在 Canvas 上设置的尺寸的情况下实现？

Answer 1

四个 div 元素的宽度始终为视口(viewport)宽度的 50%(因为您使用的是包含 2 列的 display: grid)。不是将 canvas 元素的大小基于其父 div，而是将每个 canvas 的宽度设置为视口(viewport)宽度的 50%(或50% 的宽度，无论它们的包装元素是什么)。

只有启用了实验性 Web 平台功能，此演示才能在 Chrome 中运行。

const els = Array.from(document.querySelectorAll('.wrapper div'))


  els.forEach(el => {
    const can = el.querySelector('canvas')
    var ctx = can.getContext("2d")
    ctx.clearRect(0, 0, can.width, can.height)
    can.width = window.innerWidth * .5
    can.height = 300
    ctx.font = "30px Arial"
    ctx.fillText(`${can.width}px`,10,50)
  })

html,
body {
  margin: 0;
  padding: 0;
}

.wrapper { 
  display: grid;
  grid-template-columns: repeat( 2, 1fr );
  grid-template-rows: repeat( 2, 1fr );
}

canvas {
  height: 300px;
}

<div class="wrapper">
  <div><canvas></canvas></div>
  <div><canvas></canvas></div>
  <div><canvas></canvas></div>
  <div><canvas></canvas></div>
</div>

由于您无法调整 SO 窗口的大小来查看这里的效果 Codepen效果相同。