我发现了类似的线程(此处)，但无法制定出解决方案。
在我测试过的每个浏览器(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 编程中使用的东西之外，找不到其他表达方式)。
这意味着当您调整浏览器的大小时，不会裁剪任何图片。您应该始终看到整个画面，从爪子到头顶。
我读到我所要做的就是交换 td 标签上的 position: relative;，并将其替换为 div 带有 position: relative 的标签，但围绕着我的另一个 div 标签。那可悲惨地失败了。我束手无策(我在另一个线程中的后续问题是为什么 Canvas 绘制的这张照片与原始照片相比如此糟糕!但我离题了)。
编辑:进一步阐述我所说的停靠填充图像的意思:
这是 Chrome，正在运行(第一行只占用足够的空间来容纳文本，然后表格的第二行用图像填充所有剩余空间):
当我调整它所在的窗口大小时，图像仍然“填充”:
现在，使用 IE，同样的代码，我看不到任何图像。但是如果我使用静态定位(删除相对位置和绝对位置)，IE 不会停靠填充图像:
当你缩小窗口时，你不再看到图像的一部分(爪子和下半部分)，我希望它被挤在那里:
编辑2:
Vadim 的答案很接近，但是当窗口达到大约 100 像素时，它开始切碎而不是填充。这是“最后一英里”，我花了这么长时间!因为我将显示一张缩小到 50-100 像素的图像。
最佳答案
移除绝对定位，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>关于css - IE11 在表格中的绝对位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45473644/