Question

我有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]

Canvas OK但是里面的图片很大： http://hpics.li/3cf3e2c

当我dezoom： http://hpics.li/0a0230e

感谢您的帮助！

Answer 1

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

#canvasBlocs {
    max-width: 100%;
}

要渲染图像，最好使用drawImage方法：

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

AngularJS Columns col-md size

1 个答案: