我无法找到任何文档来告诉我如何操作。我可以在画布元素上使用 object-fit cover 吗?我做了一些实验,但结果并不像预期的那样...
我无法找到任何文献来告诉我这一点或那一点。
我可以在画布元素上使用 object-fit cover 吗?我做了一些实验,但效果不如预期。
有人能给我一个明确的答案吗?
object-fit 1仅 在比例发生变化(扭曲)时 才会 被替换的 元素( canvas 是被替换的元素)
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 将纠正它。
200x200
与了解使用属性和使用 CSS 设置宽度/高度之间的区别相关的一个问题: 为什么 box-sizing 不能与 canvas 元素上的宽度/高度属性一起使用?
1从 规范 我们可以清楚地看到,所有值(默认值除外 fill )都将尝试保持以下比例:
fill
包含 替换的内容的大小被调整 为保持其纵横比 ,同时适合元素的内容框:其具体对象大小被解析为对元素使用的宽度和高度的包含约束。 覆盖 替换内容的大小被调整 为保持其纵横比 ,同时填充元素的整个内容框:其具体对象大小被解析为对元素使用的宽度和高度的覆盖约束。 没有任何 替换的内容不会调整大小以适合元素的内容框:使用未指定大小的默认大小调整算法确定对象的具体对象大小,默认对象大小等于替换元素使用的宽度和高度。
包含
替换的内容的大小被调整 为保持其纵横比 ,同时适合元素的内容框:其具体对象大小被解析为对元素使用的宽度和高度的包含约束。
覆盖
替换内容的大小被调整 为保持其纵横比 ,同时填充元素的整个内容框:其具体对象大小被解析为对元素使用的宽度和高度的覆盖约束。
没有任何
替换的内容不会调整大小以适合元素的内容框:使用未指定大小的默认大小调整算法确定对象的具体对象大小,默认对象大小等于替换元素使用的宽度和高度。
这个 none 值有点棘手,但它基本上意味着保持固有的默认图像大小而不进行 contain 缩放 cover
none
contain
cover
.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;在布局中保持原始图像宽度
很好的答案。只是想知道:封闭的目的是什么