为什么图像不适合html中的表格单元格高度？

Question

我想将屏幕分为左右两个区域，在右侧区域显示图像，在右侧区域显示文本框，为此目的编写此html代码：

<table style="width:100%">
          <tr>
            <td style="width:50%;height:100%;" align="center">
                <img src="../Content/45.png" style="display:block;height:100%;width:100%;" />
            </td>
            <td style="width:50%;">
                behzad
            </td>

          </tr>

        </table> 

但是当我运行html页面时，图像不适合表格列高度，我必须滚动浏览器才能看到所有页面，我想要恰好适应屏幕高度，我出来了我这个：

Answer 1

使用视口单元vh/vw，并保持图像的宽高比，将图像上的样式设置为display:block;max-width:50vw;max-height:100vh

＆＃13;

＆＃13;

html, body {
  margin: 0;
}
table {
  border-collapse: collapse;
}
td {
  padding: 0;
  vertical-align: top;
}

＆＃13;

<table style="width:100vw">
  <tr>
    <td style="width:50vw;height:100vh;" align="center">
      <img src="http://lorempixel.com/600/600/animals" style="display:block;max-width:50vw;max-height:100vh" />
    </td>
    <td style="width:50vh;">
      behzad
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在这种情况下，您最好使用背景图片而不是<img>来避免拉伸

检查以下演示

html,body{
  height:100%;
}
table{
  height:100%;
}

<table style="width:100%">
          <tr>
            <td style="width:50%;height:100%;background-image:url(http://placehold.it/600x600)" align="center">
      
            </td>
            <td style="width:50%;">
                behzad
            </td>

          </tr>

        </table>

Answer 3

  

强调文字

而不是本节 <img src="../Content/45.png" style="display:block;height:100%;width:100%;" />

试试这一节 <img src="../Content/45.png" height="50%" />

我希望它有效