如何在canvas元素中使用object-fit？

Question

如何在canvas元素中使用object-fit？

csshtmlhtml5-canvasobject-fit

9

我无法找到任何文档来告诉我是否可以在canvas元素上使用object-fit cover。

我做了一些实验，但它的行为并不像预期的那样。请问有人能给我一个明确的答案吗？

- fightstarr20

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Temani Afif · Accepted Answer

object-fit¹只有在比例变化（即扭曲）时才会产生影响，仅适用于替换元素（canvas是替换元素）。

这是一个基本的示例：

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设置宽度/高度之间的差异：为什么canvas元素的width/height属性不能使用box-sizing？

¹从规范中，我们可以清楚地看到所有的值（除了默认值fill）都会尝试保持其比例：

contain

替换内容的大小将保持其纵横比，同时适合于元素的内容框：它的具体对象大小是根据元素使用的宽度和高度与包含约束解决的。

cover

替换内容的大小将保持其纵横比，同时填充整个元素的内容框：它的具体对象大小是根据元素使用的宽度和高度与覆盖约束解决的。

none

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

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; 保持原始图像宽度在布局中