Question

我发现线程类似（这里），但无法解决问题。

在我测试的每个浏览器（Opera，Chrome，Edge，Firefox）中，我正在做的工作。在IE11中：完全没有。

这是我的HTML：

<!DOCTYPE html>
<html style="margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden;">

<head>
  <script type="text/javascript">
    var img = new Image;
    img.src = "http://2.bp.blogspot.com/-UBq5Nb082x0/Tw7KfsY6EWI/AAAAAAAABwE/Joe2aqsoI0k/s1600/maltese_puppy.jpg";

    function start() {
      var canvas = document.getElementById('imageCanvas');
      if (canvas == null) {
        return;
      }
      if (canvas.getContext) {
        var ctx = canvas.getContext('2d');
        ctx.imageSmoothingEnabled = false;
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      }
    }
  </script>
</head>

<body onload="start();" style="margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden;">
  <table cellspacing="0" cellpadding="0" style="margin: 0; padding: 0; width: 100%; height: 100%;">
    <tr>
      <td style="width: 100%; height: 1px;">
        Hi, I'm cute!
      </td>
    </tr>
    <tr>
      <td style="position: relative;">
        <div style="position: absolute; top: 0; bottom: 0; right: 0; left: 0; overflow: hidden;">
          <canvas id="imageCanvas" oncontextmenu="return false;" style="border: solid 5px red; margin: 0; padding: 0; width: 100%; height: 100%;">
    Your browser does not support the <code>canvas</code> element.
    </canvas>
        </div>
      </td>
    </tr>
  </table>
</body>

</html>

这是一个jsfiddle：https://jsfiddle.net/krsevs46/

所有我要做的就是让图片完全“停靠填充”（除了我在WinForms编程中使用的东西之外，找不到另一个表达式）。

这意味着在您调整浏览器大小时，不会裁剪任何图片。你应该总是看到整个画面，从爪子到头顶。

我已经读过，我要做的就是更换position: relative;标记上的td，并将div标记替换为position: relative，但围绕着我的div标记。其他HttpClient标记。那失败了。我的智慧结束了（我在另一个帖子中的跟进问题就是为什么画布将这张照片与原作相比非常糟糕！但我离题了。）

编辑：通过填充图像进一步详细说明我的意思：

这是Chrome，正常工作（第一行占用的空间足以容纳文字，然后表格的第二行用图片填充所有剩余空间）：

当我调整窗口大小时，图像仍然“填满”：

现在，使用IE，相同的代码，我看不到任何图像。但是如果我使用静态定位（删除位置相对和位置绝对），IE不会停靠填充图像：

当你缩小窗口时，你不再看到图像的一部分（爪子和下半部分），我希望它挤在那里：

EDIT2：

Vadim的答案很接近，但是当窗口达到大约100个像素时，它开始砍伐而不是填充。这是“最后一英里”，这让我花了这么久！因为我将显示一个缩小到50-100像素的图像。

Answer 1

删除绝对定位，canvas将按预期显示。您还可以删除冗余包装并添加box-sizing: border-box。演示：

* {
  /* add this to include borders and padding in width and height */
  box-sizing: border-box;
}

<!DOCTYPE html>
<html style="margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden;">

<head>
  <script type="text/javascript">
    var img = new Image;
    img.src = "http://2.bp.blogspot.com/-UBq5Nb082x0/Tw7KfsY6EWI/AAAAAAAABwE/Joe2aqsoI0k/s1600/maltese_puppy.jpg";

    function start() {
      var canvas = document.getElementById('imageCanvas');
      if (canvas == null) {
        return;
      }
      if (canvas.getContext) {
        var ctx = canvas.getContext('2d');
        ctx.imageSmoothingEnabled = false;
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      }
    }
  </script>
</head>

<body onload="start();" style="margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden;">
  <table cellspacing="0" cellpadding="0" style="margin: 0; padding: 0; width: 100%; height: 100%;">
    <tr>
      <td style="width: 100%; height: 1px;">
        Hi, I'm cute!
      </td>
    </tr>
    <tr>
      <td>
          <canvas id="imageCanvas" oncontextmenu="return false;" style="border: solid 5px red; margin: 0; padding: 0; width: 100%; height: 100%;">
    Your browser does not support the <code>canvas</code> element.
    </canvas>
      </td>
    </tr>
  </table>
</body>

</html>

Answer 2

Canvas元素以内联方式显示，因此请尝试将其显示为块元素：

#imageCanvas {
  border: solid 5px red;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: block;
}

img {
  width: 100%;
  height: 100%;
  display: block;
}

Answer 3

好的，我明白了。我在原帖中暗示了这个，关于另一个div标签。这是我做的一些小事之一，但是我对这个标签的放置是错误的。

无论如何，我在这里有一个新的jsfiddle：https://jsfiddle.net/d9ywch31/

这是我原始帖子中的代码，但我做了一些修改，让它在IE中运行（并且仍在Firefox，Chrome，Opera，Edge中工作）。我添加了评论来详细说明这些变化：

<!DOCTYPE html>
<html style="margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden;">
<head>
  <script type="text/javascript">
    var img = new Image;
    img.src = "http://2.bp.blogspot.com/-UBq5Nb082x0/Tw7KfsY6EWI/AAAAAAAABwE/Joe2aqsoI0k/s1600/maltese_puppy.jpg";
    img.onload = start; ///// change #1 - for IE had to call start from here, instead of body tag onload

    function start() {
      var canvas = document.getElementById('imageCanvas');
      if (canvas == null) {
        return;
      }
      if (canvas.getContext) {
        var ctx = canvas.getContext('2d');
        ctx.imageSmoothingEnabled = false;
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      }
    }
  </script>
</head>
<body style="margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden;"> <!-- change #2 - now start is called in javascript -->
   <table cellspacing="0" cellpadding="0" style="margin: 0; padding: 0; width: 100%; height: 100%;">
      <tr>
         <td style="width: 100%; height: 45px;"> <!-- change #3 - ensure this is set to a fixed value, as the position: abolute top will be set to this -->
         Hi, I'm cute!
         </td>
      </tr>
      <tr>
         <td> <!-- change #4 - no longer need position: relative here -->
            <div style="position: absolute; top: 45px; bottom: 0; right: 0; left: 0; overflow: hidden;"> <!-- change #5 - top set to the height of the first row -->
               <div style="width: 100%; height: 100%; overflow: hidden;"> <!-- change #6 - this is an entirely new div, this was very helpful -->
                  <canvas id="imageCanvas" oncontextmenu="return false;" style="box-sizing: border-box; border: solid 5px red; margin: 0; padding: 0; width: 100%; height: 100%;">
                  Your browser does not support the <code>canvas</code> element.
                  </canvas>
               </div> <!-- change #6 part b - it's closing tag! -->
            </div>
         </td>
      </tr>
   </table>
</body>
</html>

有一点值得注意的是，我曾经有过onload方法调用start，但对于IE我不得不将其改为javascript img.onload方法。在IE中，画布将按照我想要的方式完美对齐，但画布是空白的。如果我在ctx.drawImage之后发出img.height的警告，高度（和宽度）将为0 - 这解释了为什么画布将为空白。我想身体在图像前加载？此错误仅发生在IE11中。无论如何，我改变了它，现在它适用于我测试过的所有浏览器。

IE11表内的绝对位置

3 个答案: