javascript - AngularJS列的列大小

我有3栏：

<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

谢谢你的帮助！

最佳答案

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

#canvasBlocs {
    max-width: 100%;
}

要根据您的情况渲染图像，最好使用drawImage方法：

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

关于javascript - AngularJS列的列大小，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26753792/