css - 的纵横比行为 - 内部尺寸和元素大小

Question

如您所知，<canvas> HTML5 中的元素有一个内部大小，通过 elm.width 设置和 elm.height其中 elm是 DOM 元素。

DOM 本身中的元素可以有不同的框大小，通过 CSS 设置。

当两者不同时，浏览器自动拉伸(stretch) <canvas> 的内容以适合内容框大小。可以在没有额外元素的情况下调整此行为吗？可以设置成类似background-size: contain的东西吗？以便它保持内部 Canvas 尺寸的纵横比？

据我所知，没有标准的方法可以做到这一点，因此也接受特定于 webkit 的 hack。但是，如果根本没有办法做到这一点，最优雅用包装元素来做到这一点是什么(我们都知道我们可以包装元素并在调整大小时通过 JS 调整它)？

我能想到的一个解决方案实际上是使用 background-size: contain和 background: element()但这是特定于 Firefox 的，我正在寻找 WebKit 解决方案。

附带问题，元素框和 Canvas 内部尺寸的差异会影响性能吗？如果有，多少钱？

Answer 1

是的，有一个new CSS property called object-fit .这允许您将内容设置为例如 cover，这将在填充 DOM 框的同时强制保持纵横比。

只需将此规则添加到 Canvas 元素:

canvas {
  object-fit: cover;
  }

支持

(已更新)它是(部分)supported in Safari , 但不在 IE 中。 Opera Mini 需要一个 -o- 前缀。

似乎不适用于 Chrome 中的 WebGL Canvas (或视频)可能与这些问题有关:issue #1 , issue #2 , issue #3 .

作为后备，大小可以是 calculated manually .这可以与 drawImage 一起使用。如果 drawImage 不是一个选项，它将需要一个将溢出设置为隐藏的包装器元素才能工作。

例子

下面的两个 Canvas 都使用默认的 位图 大小 300x150。然后通过将 CSS 大小定义为 300x300 像素来拉伸(stretch)它们。

通常这会使圆变成椭圆形。然而，右边的 Canvas 将使用新的 object-fit 规则设置为 cover，位图将根据纵横比进行缩放，所以我们仍然得到一个圆圈，但是当然，我们也会松开一些边缘(以及锐度)。

var ctx1 = document.getElementById("c1").getContext("2d");
var ctx2 = document.getElementById("c2").getContext("2d");

drawCircle(ctx1, 150, 75, 70);   // draw circle to stretched canvas 1
drawCircle(ctx2, 150, 75, 70);   // draw circle to object-fit/cover canvas 2

function drawCircle(ctx, x, y, r) {
  ctx.moveTo(x + r, y);
  ctx.arc(x, y, 70, 0 , 6.28);
  ctx.closePath();
  ctx.stroke();
}

#c1, #c2 {
    width:300px;
    height:300px;
    }
#c2 {
    -o-object-fit: cover;  /* for Opera Mini */
    object-fit: cover;     /* W3C version (incl. FF/webkit) */
    }

<canvas id="c1"></canvas><canvas id="c2"></canvas>