Question

我找到的答案都没有帮助我，所以我希望有人知道该怎么做。

我有一个由表格设计的母版页，我有3行，第一行的高度是20％，第二行是5％，第三行是75％。我希望我的徽标填满整个第一行，其中只有一个，但原始照片比窗口大小大。我试图将图像的宽度和高度设为100％，但由于某种原因它仍然更大，它使得该行约为40％....

＆＃13;

<table style="position:absolute; height:100%; width:100%" border="1">
  <tr style="text-align:center; height:20%;">
    <td colspan="2">
      <img style="width:100%; height:100%" src="Pictures/logo.jpg" />
    </td>
  </tr>
  <tr style="text-align:center; height:5%">
    <td colspan="2">
      <asp:ContentPlaceHolder ID="index" runat="server"></asp:ContentPlaceHolder>
    </td>
  </tr>
  <tr style="height:75%">
    <td style="width:20%">

    </td>
    <td style="width:80%">
      <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
    </td>
  </tr>
</table>

＆＃13;

当我删除图片时，它一切都很好，页面看起来很好但是当我添加徽标时，宽度很好，但高度看起来与第三个高度相同。

我能解决这个问题吗？提前谢谢！

Answer 1

您可以将其设置为absolute并将其展开为完整width和height

<tr style="text-align:center; height:20%;">
    <td colspan="2" style="position:relative">
       <img style="width:100%; height:100%;position:absolute;top:0;left:0;" src="Pictures/logo.jpg" />
    </td>
</tr>

此外，包裹tr应设置为position:relative，以便img定位与tr相关。

如何制作与图像大小相同的图像？

1 个答案: