Javascript 如何在HTML中绘制具有固定大小的图像，如基于家庭的形状

我想画一幅像下面这样的图

我的数据库跟踪了一条记录

1, Inbound Logistics, Operations, Outbound Logistics, Marketing & Sales, Service

我试着像这样显示为HTML文档

<table>
<tr>
<td background="arrow.gif">Inbound Logistics</td>
<td background="arrow.gif">Operations</td>
<td background="arrow.gif">Outbound Logistics</td>
<td background="arrow.gif">Marketing & Sales</td>
<td background="arrow.gif">Service</td>
</tr>
</table>

入境物流
操作
外部后勤
市场营销
服务

但是，innerText的每个长度都不同，所以我想自动调整图像的大小，但不知道如何调整。背景选项似乎没有图像固定功能。（我是否需要使用JavaScript来获取innerText的大小？）

---

任何帮助都将不胜感激。谢谢。

您需要在td上指定一个宽度，使其保持恒定宽度

---

我会用CSS设计表格的样式

我尚未测试此代码，但您可以执行以下操作：

<script>
  .arrow {
      background-image: 'path/to/your/pic/arrow.gif';
      width: 100px;
      height: 70px;
  }
</script>
<table>
<tr>
<td class="arrow">Inbound Logistics</td>
<td class="arrow">Operations</td>
<td class="arrow">Outbound Logistics</td>
<td class="arrow">Marketing & Sales</td>
<td class="arrow">Service</td>
<td class="vertical" rowspan="5">Margin</td>
</tr>
<tr><td colspan="5">Infrastructure</td></tr>
<tr><td colspan="5">Human Resource Management</td></tr>
<tr><td colspan="5">Information Technology</td></tr>
<tr><td colspan="5">Procurement</td></tr>
</table>

.阿罗{
背景图像：“path/to/your/pic/arrow.gif”；
宽度：100px；
高度：70像素；
}
入境物流
操作
外部后勤
市场营销
服务
边缘
基础设施
人力资源管理
信息技术
采购

并适当调整

宽度

和

高度

参数，以达到所需的大小。对于单词边距的垂直文本，您可以执行类似于他们在中或中建议的操作

---

祝你好运

您可以将文本包装到下一行，如提供的示例所示。谢谢大家。我正在尝试根据您的答案编写代码。使用CSS修复了此问题。谢谢

<script>
  .arrow {
      background-image: 'path/to/your/pic/arrow.gif';
      width: 100px;
      height: 70px;
  }
</script>
<table>
<tr>
<td class="arrow">Inbound Logistics</td>
<td class="arrow">Operations</td>
<td class="arrow">Outbound Logistics</td>
<td class="arrow">Marketing & Sales</td>
<td class="arrow">Service</td>
<td class="vertical" rowspan="5">Margin</td>
</tr>
<tr><td colspan="5">Infrastructure</td></tr>
<tr><td colspan="5">Human Resource Management</td></tr>
<tr><td colspan="5">Information Technology</td></tr>
<tr><td colspan="5">Procurement</td></tr>
</table>