8wDlpd.png
首页
8wDFp9.png
分类
8wDEOx.png
8wDMfH.png
消息
8wDKte.png
我的
  2. image
  3. object-fit 如何与 canvas 元素配合使用？

object-fit 如何与 canvas 元素配合使用？

M. Mariscal 2月前
19 0

我无法找到任何文档来告诉我如何操作。我可以在画布元素上使用 object-fit cover 吗？我做了一些实验，但结果并不像预期的那样...

我无法找到任何文献来告诉我这一点或那一点。

我可以在画布元素上使用 object-fit cover 吗？我做了一些实验，但效果不如预期。

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

帖子版权声明 1、本帖标题：object-fit 如何与 canvas 元素配合使用？
    本站网址：http://xjnalaquan.com/
2、本网站的资源部分来源于网络，如有侵权，请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点，并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
5、站长邮箱：yeweds@126.com 除非注明，本帖由M. Mariscal在本站《image》版块原创发布， 转载请注明出处！
收藏的用户（0） X
正在加载信息~
最新回复 (0)
  • 引用 2楼

    object-fit 1仅 在比例发生变化（扭曲）时 才会 被替换的 元素（ 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：contain；在布局中保持原始图像宽度

  • 引用 3楼

    很好的答案。只是想知道：封闭的目的是什么

    s with corresponding .box styling, and the display: block in the first snippet? Result looks the same if you remove them, but code clarity would improve imho.
返回
作者最近主题：