html - キャンバスを含むdivストレッチ

Question

こんにちは私はこれをしようとしています：

<div>
<canvas height="300px" width="200px"></canvas>
</div>

キャンバスをレンダリングするためにJavaScriptを作成しましたが、キャンバスのサイズに応じてdivを拡大する方法と、JavaScriptなしで可能かどうかを誰かにアドバイスしてもらえますか？ネストされたdivのソリューションをすでに試しましたが、機能しませんでした。ありがとう

Answer 1

display含むために別のものを使用するとdiv、物事は機能するはずです（このjsfiddleも参照してください）：

<div>
    <canvas height="300px" width="200px"></canvas>
</div>

CSS：

div {
    border: 2px solid blue; /* demo purposes */
    display: inline-block;
    line-height: 0;
}
canvas {
    background-color: khaki; /* demo purposes */
}

PS。キャンバスの下にスペースがレンダリングされline-height: 0ていないことを確認するためにあります。この質問も参照してください。

Answer 2

キャンバスのサイズがいつ変更されるかを判断できる場合は、変更されたキャンバスのサイズに応じてdivのサイズを動的に設定するイベントを発生させます