对象适合画布元素

Question

我一直无法找到任何文件告诉我这种或那种方式。

我能在画布元素上使用对象适合的封面吗？我做了一些实验，并没有按预期行事。

有人能给我一个明确的答案吗？

Answer 1

object-fit1仅在比率发生变化时才能正常工作。

这是一个基本的例子：

var canvas = document.querySelectorAll("canvas");
for (var i = 0; i < canvas.length; i++) {
  ctx = canvas[i].getContext("2d");
  ctx.fillRect(50, 50, 100, 100);
}

canvas {
  width: 100px;
  height: 250px;
  border: 1px solid red;
  display: block;
}

.box {
  display: inline-block;
  border: 2px solid green
}

<div class="box">
  <canvas width="200" height="200"></canvas>
</div>
<div class="box">
  <canvas width="200" height="200" style="object-fit:contain;"></canvas>
</div>
<div class="box">
  <canvas width="200" height="200" style="object-fit:cover;"></canvas>
</div>

正如你所看到的，我将画布的高度/宽度定义为200x200（1：1比率），然后我使用CSS更改此值，因此我打破了比率（我们不再有正方形），然后object-fit将更正此问题。

一个相关的问题，以了解使用属性设置宽度/高度和使用CSS之间的区别：Why box-sizing is not working with width/height attribute on canvas element?

---

1从the specification我们可以清楚地看到所有的值（期望默认值为fill）将尝试保持比率：

包含

替换内容的大小可以在适合元素内容框的同时保持其宽高比：其具体对象大小被解析为对元素使用的宽度和高度的包含约束。

覆盖

替换内容的大小可以在填充元素的整个内容框时保持其纵横比：其具体对象大小被解析为对元素使用的宽度和高度的封面约束。

没有

替换的内容未调整大小以适合元素的内容框：使用没有指定大小的默认大小调整算法确定对象的具体对象大小，并且默认对象大小等于替换元素的使用宽度和高度。

none值有点棘手，但它基本上意味着保持内在默认图像大小而不像contain或cover那样缩放

var canvas = document.querySelectorAll("canvas");
for (var i = 0; i < canvas.length; i++) {
  ctx = canvas[i].getContext("2d");
  ctx.fillRect(50, 50, 100, 100);
}

.box canvas {
  border: 1px solid red;
  display: block;
  object-fit:none;
}

.box {
  display: inline-block;
  border: 2px solid green
}

<canvas width="200" height="200"></canvas>
<div class="box">
  <canvas width="200" height="200" style="width:100px;height:200px;"></canvas>
</div>
<div class="box">
  <canvas width="200" height="200" style="height:50px;width:200px;"></canvas>
</div>

相关：CSS object-fit: contain; is keeping original image width in layout