如何使图像的尺寸与相同？[英]How can I make an image the same size of the ? 本文翻译自 ril2 查看原文 2014-08-02 98 css/

None of the answers I found helped me so I was hoping that someone will know what to do here.

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

I have a master page which is designed by a table, I have 3 rows, the first row's height is 20%, the second is 5% and the third is 75%. I want my logo to fill the whole first row which has only one in it, but the original photo is way bigger than the window's size. I tried to make the image's width and height 100% but it still is bigger for some reason and it makes the row about 40%....

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

<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>

When I delete the image, it's all good, the page looks fine but when I add the logo, the width is fine but the height looks the same as the third's height.

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

Is there any was I can fix this? Thanks in advance!

有没有我可以解决这个问题?提前致谢!

1 个解决方案

#1

You can set it as absolute and expand it to full width and 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>

Also, the wrapping tr should be set to position:relative so the img positioning will be in relation to the tr.

此外,包裹tr应设置为position:relative,因此img定位将与tr相关。

#1