使用CSS将图像大小设置为容器高度的100%

Question

我已经解决了解决方案之后阅读解决方案并尝试了各种各样的事情,但从未让这个工作正常...

我希望图像最终根据浏览器窗口的当前高度动态调整大小.目前使用图像下方的代码是原始高度,最终比浏览器窗口更大,导致出现垂直滚动条.

注意:请记住,我希望使用相同数量的表格和单元格完成此操作.请不要给我一个表解决方案.

<html>
  <head>
    <style>
      body
      {
        text-align: center;
        margin: 0px;
        margin-left: auto;
        margin-right: auto;
      }
      table.one
      {
        border-collapse: collapse;
      }
      table.two
      {
        border-collapse: collapse;
      }
      img
      {
        max-height: 100%;
      }
    </style>
  </head>
  <body>
    <table class="one" cellpadding=0>
      <tr>
        <td>
          <table class="two" cellpadding=0>
            <tr>
              <td>
                <img src="myimage.jpg">
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </body>
</html>

Answer 1

您可以使用视口单元根据浏览器窗口的大小调整大小.

img {
    max-height: 100vh;
}