CSS Bootstrap 列中的响应式画布？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23973932/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Responsive Canvas in Bootstrap column?
提问by Corey Ogburn
I'm new to bootstrap and working on a project to help figure it out. I also don't know much LESS yet.
我是引导程序的新手，正在从事一个项目来帮助解决这个问题。我也不太了解 LESS。
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.
我有 2 列：col-xs-3 和 col-xs-9。在第 9 列中，我有一个画布，我希望保留特定的纵横比。我实际上并不关心纵横比是什么，只要它到处都是一样的。具体来说，与列和给定宽度的适当高度一样宽。
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.
我试过使用宽度和高度的百分比，但即使这样做有效，在动态高度列中也不太理想。
回答by jme11
This example works fine for me. I think you need to do two things: remember to set the widthand heightproperties 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.
这个例子对我来说很好。我认为你需要做两件事：记得在画布上设置width和height属性，然后你可以将画布宽度设置为100%，将其高度设置为auto。它应该使画布始终是其容器的全宽，并强制其高度保持成比例。
CSS:
CSS：
canvas {
background-color: blue;
width: 100%;
height: auto;
}
HTML:
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 <canvas> 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:
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();
});
一个小提琴演示
