如何将织物画布拉伸到其父 div 的全宽

【问题标题】：How to stretch a fabric canvas to the full width of its parent div如何将织物画布拉伸到其父 div 的全宽
【发布时间】：2020-12-14 01:18:09
【问题描述】：

current situation 我有一个放置在父 div 内的织物画布。如何将画布拉伸到其父级的全部宽度和高度

我的代码如下所示：

<div class="design_editor_div">       
    <canvas id="c"  width="500" height="500" style="border-style:dashed;border-color:#a1a1a1;text- 
     align:center;border-width:initial;"></canvas>
    <img src="{{ '2.png' | asset_url }}"  title="" alt="" style="display: none" id="img">         
</div>

【问题讨论】：

标签： javascript html css html5-canvas fabricjs

【解决方案1】：

您可以使用 css 并像这样选择 div 的子元素：

canvas > div {
    display: block;
    width: 100%;
    height: 100%;
   
}

当然，使用单独的样式表并在您的 html 文档的头部包含 <link>path-to-stylesheet</link> 或 <style> css... </style> 标记。内联 CSS 样式应该保留给您需要更改的非常独特的元素，例如制作 a 或 <p> 元素 <strong> 或 <u> 的一部分。内联很多<style>标签会影响标签的可读性。

【讨论】：