Подтвердить что ты не робот

Отзывчивый холст в колонке Bootstrap?

Я новичок в бутстрапе и работаю над проектом, чтобы помочь понять его. Я еще не знаю много МЕНЕЕ.

У меня есть 2 столбца: col-xs-3 и col-xs-9. В столбце 9 у меня есть холст, который я хотел бы сохранить в определенном соотношении сторон. Мне все равно, каково соотношение сторон, если оно одинаково повсюду. В частности, ширина столбца и соответствующая высота для данной ширины.

Я пробовал использовать проценты для ширины и высоты, но даже если бы это сработало, оно было бы менее идеальным в столбце динамической высоты.

Ответ 1

Этот пример отлично подходит для меня. Я думаю, вам нужно сделать две вещи: не забудьте установить свойства width и height на холсте, а затем вы можете установить ширину холста на 100% и ее высоту на auto. Это должно заставить холст всегда быть полной шириной его контейнера и заставлять его высоту оставаться в пропорции.

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 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 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 демонстрацию скрипта