html - 为什么图像不适合 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

使用视口(viewport)单位 vh/vw，并保持图像的纵横比，将图像的样式设置为 display:block;max-width:50vw;max-height: 100vh

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

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