แอตทริบิวต์ความกว้าง HTML
ความหมายและการใช้งาน
แอตทริบิวต์widthระบุความกว้างขององค์ประกอบในหน่วยพิกเซล
หมายเหตุ:สำหรับองค์ประกอบอินพุตwidthแอตทริบิวต์จะใช้กับ
<input type="image">.
นำไปใช้กับ
สามารถใช้ แอตทริบิวต์widthกับองค์ประกอบต่อไปนี้:
| องค์ประกอบ | คุณลักษณะ |
|---|---|
| <ผ้าใบ> | ความกว้าง |
| <embed> | ความกว้าง |
| <iframe> | ความกว้าง |
| <img> | ความกว้าง |
| <input> | ความกว้าง |
| <วัตถุ> | ความกว้าง |
| <video> | ความกว้าง |
ตัวอย่าง
ตัวอย่างผ้าใบ
<canvas> องค์ประกอบที่มีความสูงและความกว้าง 200 พิกเซล:
<canvas id="myCanvas" width="200" height="200" style="border:1px solid">
ฝังตัวอย่าง
แอนิเมชั่นแฟลชที่มีความสูงและความกว้าง 200 พิกเซล:
<embed src="helloworld.swf" width="200" height="200">
ตัวอย่างไอเฟรม
<iframe> ที่มีความสูงและความกว้างที่ระบุ 200 พิกเซล:
<iframe src="/default.asp" width="200" height="200"></iframe>
Img ตัวอย่าง
รูปภาพที่มีความสูงและความกว้าง 42 พิกเซล:
<img src="smiley.gif" alt="Smiley face" height="42" width="42">
ตัวอย่างอินพุต
กำหนดรูปภาพเป็นปุ่มส่ง โดยมีแอตทริบิวต์ความสูงและความกว้าง:
<form action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
ตัวอย่างวัตถุ
แอนิเมชั่นแฟลชที่มีความสูงและความกว้าง 400 พิกเซล::
<object data="helloworld.swf" width="400" height="400"></object>
ตัวอย่างวิดีโอ
เครื่องเล่นวิดีโอที่มีความกว้างและความสูงที่ระบุ:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
รองรับเบราว์เซอร์
แอตทริบิวต์widthมีการสนับสนุนเบราว์เซอร์ต่อไปนี้สำหรับแต่ละองค์ประกอบ:
| Element | |||||
|---|---|---|---|---|---|
| canvas | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
| embed | Yes | Yes | Yes | Yes | Yes |
| iframe | Yes | Yes | Yes | Yes | Yes |
| img | Yes | Yes | Yes | Yes | Yes |
| input | 1.0 | Yes | 16.0 | Yes | 1.0 |
| object | Yes | Yes | Yes | Yes | Yes |
| width | Yes | Yes | Yes | Yes | Yes |