امتداد div يحتوي على قماش

Question

مرحبًا، أحاول الحصول على هذا:

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

لقد قمت بإنشاء جافا سكريبت لعرض اللوحة القماشية، هل يمكن لأحد أن ينصحني بكيفية تمديد div وفقًا لحجم اللوحة القماشية وإذا كان ذلك ممكنًا بدون جافا سكريبت؟؟لقد قمت بالفعل بتجربة حلول لعناصر 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 */
}

ملاحظة.ال line-height: 0 هناك للتأكد من عدم ظهوره يتم تقديم الفضاء أسفل القماش.أنظر أيضا هذا السؤال.

Answer 2

إذا كان بإمكانك تحديد متى يتم تغيير حجم اللوحة القماشية، فقم بإطلاق حدث من شأنه تعيين أبعاد div ديناميكيًا وفقًا للأبعاد المتغيرة لللوحة القماشية