5

我一直找不到任何文件来告诉我一种或另一种方式。

我可以在画布元素上使用适合对象的封面吗？我做了一些实验，但它的表现并不像预期的那样。

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

4

1 回答 1

7

object-fit1仅在存在比率变化（失真）并且仅适用于替换元素（是替换元素）时才会生效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 之间的区别的相关问题：为什么 box-sizing 不适用于 canvas 元素上的宽度/高度属性？

1从规范中我们可以清楚地看到所有值（除了默认值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：包含；在布局中保持原始图像宽度

于 2019-02-25T13:20:31.560 回答