响应画布在Bootstrap列？ [英] Responsive Canvas in Bootstrap column?

问题描述

我刚接触bootstrap，正在开发一个项目来帮助解决这个问题。我也不知道还有多少。

I'm new to bootstrap and working on a project to help figure it out. I also don't know much LESS yet.

我有两列：col-xs-3和col-xs-9。在9列中，我有一个画布，我想保留一个特定的长宽比。我实际上不关心什么是长宽比，只要它是一样的无处不在。具体来说，宽度与列宽和给定宽度的适当高度一致。

I have 2 columns: col-xs-3 and col-xs-9. In the 9 column, I have a canvas that I would like to retain a particular aspect ratio. I don't actually care what the aspect ratio is, as long as it's the same everywhere. Specifically, as wide as the column and a proper height for the given width.

我试过对宽度和高度使用百分比，但即使这样做，

I've tried using percentages for width and height, but even if that did work, it'd be less than ideal in a dynamic height column.

推荐答案

这个例子对我来说很好。我想你需要做两件事：记住在画布上设置 width 和 height 属性，然后你可以将画布宽度设置为 100％，将其高度设置为 auto 。

This example works fine for me. I think you need to do two things: remember to set the width and height properties on the canvas, and then you can set the canvas width to 100% and its height to auto. It should cause the canvas to always be the full width of its container and force its height to remain in proportion.

CSS：

canvas {
  background-color: blue; 
  width: 100%;
  height: auto;
}

HTML：

<div class="container">
      <div class="row">
        <div class="col-md-4">
            <canvas id="canvas" width="300" height="300">
              Sorry, your browser doesn't support the &lt;canvas&gt; element.
            </canvas>
        </div> <!-- /col-md-4 -->
        <div class="col-md-4">
            <p>item 1: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div> <!-- /col-md-4 -->
        <div class="col-md-4">
            <p>item 2: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div> <!-- /col-md-4 -->
      </div> <!-- /row -->
    </div>

JS：

$( document ).ready(function() {

    var c=document.getElementById("canvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.arc(95,50,40,0,2*Math.PI);
    ctx.stroke();

});

A fiddle demo

这篇关于响应画布在Bootstrap列？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！