Question

在我的应用程序中，我的div使用twitter bootstrap这样设置：

<div class="col-md-12">
    <canvas id="canvas"></canvas>
</div>

画布是一些大图像的占位符。我需要一种方法来将图像缩放到此div的宽度和高度，或者如果不完全按比例缩放到div的宽度和高度，则缩放必须为div创建一个非常小的滚动条。 div具有overflow:scroll样式。

Answer 1

使用JavaScript获取div的宽度和高度，然后使用这些值设置画布高度和宽度。

例如：

var canvas = document.getElementsByTagName('canvas')[0];
var divHeight = document.getElementById('yourDiv').clientHeight;
var divWidth = document.getElementById('yourDiv').clientWidth;

canvas.height = divHeight;
canvas.width = divWidth;

您可以将其添加到resize事件处理程序中，这样当div高度/宽度缩放时，它会调用上面的代码。

Answer 2

如果您不喜欢非JavaScript的答案，可以在CSS中实现：

.col-md-12{
  position:relative; //make sure this is part of your col-md style
}

#canvas{
  position:absolute;
  width:100%;
  height:100%;
  top:0px;
}

我假设有样式设置.col-md-12 div在其他地方的高度。

Answer 3

当你使用bootstrap时，你可以使用jquery：

var $canvas = $("#canvas");
var $parent = $canvas.parent();
$canvas.width($parent.width());
$canvas.height($parent.height());

将HTML5 Canvas缩放为div宽度和高度

3 个答案: