3

我环顾四周阅读解决方案并尝试了各种解决方案，但从未让它正常工作......

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

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

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

3 回答 3

8

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

img {
    max-height: 100vh;
}
于 2013-08-10T18:13:56.893 回答
1

添加img {display:block;}. 这应该消除底部的几个像素。

也将做与HTML5 解决方案td {padding:0;}相同的事情。cellpadding=0

编辑：然后试试这个，对我来说似乎是一样的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>Untitled</title>
    <style type="text/css">
        body {margin:0; padding:0;}
        table {border-collapse:collapse; border-spacing:0;}
        td {padding:0;}
    </style>
</head>
<body>
    <table style="background:#888;">
        <tr style="background:#f88;">
            <td style="background:#8f8;">I should</td>
            <td style="background:#88f;">look the</td>
        </tr>
        <tr style="background:#ff8;">
            <td style="background:#8ff;">same across<td/>
            <td style="background:#f8f;">different browsers</td>
        </tr>
    </table>
</body>
</html>
于 2013-08-10T18:29:57.150 回答
-3

用 Jquery imagescale 试试这个：

<img id="img1" src="myimage.jpg">

    $(document).ready(function(){ 
      $('#img1').imgscale({ 
        parent : '.parentcontainer',
        fade : 1000 
      }); 
    });

请记住首先将您的父容器宽度和高度定义为：

.parentcontainer {
  height: 100%; 
  width: 100%; 
}
于 2013-08-10T17:06:49.573 回答