AngularJS列Columns大小

Question

我有三栏：

<div class="col-md-2">
<!-- Stuff 1 -->
</div>

<div class="col-md-6">
   <canvas id="canvasBlocs" width="950" height="1700"></canvas>   
</div>

<div class="col-md-4">
<!-- Stuff 3 -->
</div>

在我的画布中，我有一个图像，但是它不适合列(如果我缩放/去缩放，它在右边和左边)。

我怎样才能确保画布不会比柱子大？

我只想要画布和柱子完全吻合。

编辑我的JS代码。现在画布里的图像是“大到大”的。如何缩放画布中图像的大小？

    var canvas = document.getElementById('canvasBlocs');
    var context = canvas.getContext('2d');
    var img = new Image();
    img.src = ".img/myImage.png;
    img.onload = function () {
       var pattern = context.createPattern(img, "no-repeat");
       context.fillStyle = pattern;
       context.fillRect(0, 0, canvas.width, canvas.height);
    }

EDIT2

画布确定，但图像在大到大：http://hpics.li/3cf3e2c

当我去变焦：http://hpics.li/0a0230e

谢谢你的帮忙!

Answer 1

只需告诉canvas元素不要扩展到父容器的宽度，它就会按比例缩放：

#canvasBlocs {
    max-width: 100%;
}

要在您的示例中呈现图像，最好使用drawImage方法：

img.onload = function() {
   context.drawImage(img, 0, 0, img.width, img.height);
}