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

Answer 2

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

同样td {padding:0;}将执行与cellpadding=0相同的操作，但它是HTML5解决方案。

修改：试试这个，对我来说似乎是一样的：

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

Answer 3

尝试使用Jquery imagescale：

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

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

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

.parentcontainer {
  height: 100%; 
  width: 100%; 
}

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

3 个答案: