html - 如何创建一个方形 div，其宽度和高度完全等于响应式字符的高度？

Question

我想创建一个div，其中widthandheight完全等于 1 个字符的高度，并且宽度和高度应该是响应式的：如果我改变字体大小，宽度和高度也会改变。我试过了 ：

<table border="1" style="position:relative;">
  <tr>
    <td style="font-size:144px">&nbsp
      <div style="position:absolute;top:0%;left:0%;background-color:red;width:100%;padding-bottom:100%;"/>
    </td>
  </tr>
</table>

红色方块的边自动等于width“ ”的边。但我希望它等于height“ ”，我试过：

<table border="1" style="position:relative;">
  <tr>
    <td style="font-size:144px">&nbsp
      <div style="position:absolute;top:0%;left:0%;background-color:red;height:100%;padding-right:100%;"></div>
    </td>
  </tr>
</table>

只是用“height”替换“width”，用“padding-right”替换“padding-bottom”，但似乎不起作用，有什么办法吗？

标签： htmlcssresponsive-design