ตั้งค่าความกว้างขององค์ประกอบใน HTML ด้วยแอตทริบิวต์ width

แอตทริบิวต์ width ใช้กำหนดความกว้างขององค์ประกอบต่างๆ ใน HTML หน่วยค่าเริ่มต้นคือพิกเซล (pixels) สามารถใช้ได้กับหลายแท็กที่เกี่ยวข้องกับสื่อและฝังเนื้อหา

แท็กที่รองรับ width attribute

ตัวอย่างการใช้งาน

<!DOCTYPE HTML>
<html>
<body>
  <h2>ตัวอย่าง Video กำหนด width/height</h2>
  <video width="300" height="200" controls autoplay muted>
    <source src="/media/sample.mp4" type="video/mp4" />
    <source src="/media/sample.webm" type="video/webm" />
    เบราว์เซอร์ไม่รองรับ video
  </video>
  
  <br><br>
  
  <h2>Canvas ต้องกำหนด width/height แบบ attribute</h2>
  <canvas id="myCanvas" width="400" height="200" style="border:1px solid #333">
    เบราว์เซอร์ไม่รองรับ canvas
  </canvas>
  
  <script>
    const ctx = document.getElementById('myCanvas').getContext('2d');
    ctx.fillStyle = '#317EFB';
    ctx.fillRect(50, 50, 100, 100);
  </script>
</body>
</html>

ความแตกต่าง: width attribute vs CSS width

แนวทางปฏิบัติที่ดีที่สุด

• Canvas: ต้องใช้ attribute เสมอ สำหรับ resolution
• Image/Video: ใช้ attribute สำหรับขนาดจริง + CSS max-width: 100%; height: auto; สำหรับ responsive
• Iframe: ใช้ CSS สำหรับ responsive layout
• หลีกเลี่ยงการใช้ width/height attribute เพื่อบังคับขนาดที่ไม่สัดส่วน (aspect ratio) - ใช้ CSS object-fit แทน