Как сделать отзывчивый холст HTML в div

Question

У меня есть три div. У первого и третьего div есть кнопка Next - Previous. Второй означает, что центр div имеет холст HTML. Поэтому я хочу сделать его отзывчивым. Но максимальная высота холста должна быть 400 пикселей, а максимальная ширина должна быть 300 пикселей. проверить эту скрипку -

http://jsfiddle.net/4zx732ug/1/

<div> 
<div class="left"> First Div </div> 
<div class="middle"> 
<canvas id="myCanvas" height="400" width="300" style="border:1px solid #000000;"></canvas> 
</div> 
<div class="right"> Third Div </div> 
</div> 

CSS -

.left { 
float: left; 
background-color: #ddd; 
} 

.middle { 
background-color: yellow; 
float: left; 
} 

.right { 
float: left; 
background-color: #ddd; 
} 

Так как я делаю это Див отзывчив с холста?

Answer 1

Возможно, это поможет вам.

HTML:

<div> 
<div class="left"> First Div </div> 
    <div class="middle"> 
     <canvas id="myCanvas" height="400"></canvas> 
    </div> 
    <div class="right"> Third Div </div> 
</div> 

CSS:

.left { 
    float: left; 
    background-color: #ddd; 
} 
.middle { 
    background-color: yellow; 
    float: left; 
    border:1px solid #000000; 
    width: 300px; 
} 
.right { 
    float: left; 
    background-color: #ddd; 
} 
@media all and (max-width: 450px) { 
    .middle { 
     width: calc(69% - 10px); 
    } 
} 
@media all and (max-width: 410px){ 
    .middle { 
     width: calc(67% - 10px); 
    } 
} 
@media all and (max-width: 360px){ 
    .middle { 
     width: calc(60% - 10px); 
    } 
} 

DEMO

Answer 2

Для того, чтобы холст следовать DIV, предполагая вы применили CSS к div (важно для этого работать), вы можете использовать ограничивающий клиентский прямоугольник div, чтобы сделать растровое изображение совпадающим с размером этого родительского div.

вызовов, когда DOM загружен для инициализации, а также на изменении размера окна:

var rect = document.querySelector(".middle").getBoundingClientRect(); 
var canvas = document.getElementById("myCanvas"); 

canvas.width = Math.max(1, Math.min(400, rect.width)); 
canvas.height = Math.max(1, Math.min(300, rect.height)); 

Как холст растрового изображения не может быть меньше, чем 1 пиксель также силы зажима на этом конце.