จะใช้แอตทริบิวต์ความสูงและความกว้างใน HTML ได้อย่างไร

แอตทริบิวต์ความสูงและความกว้างใน HTML ใช้เพื่อระบุความสูงและความกว้างขององค์ประกอบ ค่าต่างๆ ถูกกำหนดเป็น px เช่น พิกเซล

แอตทริบิวต์ความสูงและความกว้างใช้ในองค์ประกอบ HTML ต่อไปนี้:

S. ไม่	องค์ประกอบ	แอตทริบิวต์	แอตทริบิวต์
1		ความสูง	ความกว้าง
2	องค์ประกอบ	ความสูง	ความกว้าง
3	องค์ประกอบ <br> </td> <td style="text-align:center;">ความสูง <br> </td> <td style="text-align:center;">ความกว้าง <br> </td> </tr> <tr><td style="width:15.6405%; text-align:center;">4 <br> </td> <td style="width:42.0455%; text-align:center;"><img> องค์ประกอบ <br> </td> <td style="text-align:center;">ความสูง <br> </td> <td style="text-align:center;">ความกว้าง <br> </td> </tr> <tr><td style="width:15.6405%; text-align:center;">5 <br> </td> <td style="width:42.0455%; text-align:center;"><input> องค์ประกอบ <br> </td> <td style="text-align:center;">ความสูง <br> </td> <td style="text-align:center;">ความกว้าง <br> </td> </tr> <tr><td style="width:15.6405%; text-align:center;">6 <br> </td> <td style="width:42.0455%; text-align:center;"><object> องค์ประกอบ <br> </td> <td style="text-align:center;">ความสูง <br> </td> <td style="text-align:center;">ความกว้าง <br> </td> </tr> <tr><td style="width:15.6405%; text-align:center;">7 <br> </td> <td style="width:42.0455%; text-align:center;"><video> องค์ประกอบ <br> </td> <td style="text-align:center;">ความสูง <br> </td> <td style="text-align:center;">ความกว้าง <br> </td> </tr> </tbody> </table> <p> ในการเพิ่มรูปภาพในหน้า HTML จะใช้แท็ก <img> ด้วยเหตุนี้ เราจึงต้องใช้แอตทริบิวต์ height และ width เพื่อกำหนดความสูงและความกว้างของภาพเป็นพิกเซล</P> <p> <br> </P> <p> <img loading='lazy' alt='จะใช้แอตทริบิวต์ความสูงและความกว้างใน HTML ได้อย่างไร ' src="/article/uploadfiles/202203/2022033115581206.jpg" /></P> <h2>ตัวอย่าง</h2> <p> คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อเรียนรู้วิธีใช้แอตทริบิวต์ความสูงและความกว้างใน HTML</P> <pre><!DOCTYPE html> <html>    <head>       <title>HTML height and width attribute</title>    </head>    <body>       <img src="https://www.tutorialspoint.com/green/images/logo.png" alt="Simply Easy Learning" width="200" height="70">    </body> </html></pre> <br> </article> <div class="ad ad5"> <script language='javascript' src='https://th.wsxdn.com/css/ad/th2.js'></script> </div> <section id="turn-page" class="t-over"> <div class="f-start f-align"> <i><img src="https://th.wsxdn.com/css/img/sanjiao.svg" alt=""></i> <a class='LinkPrevArticle' href='https://th.wsxdn.com/db044w/zx451s/1004063861.html' >จะใช้ประเภทอินพุตวันที่และเวลาใน HTML ได้อย่างไร </a> </div> <div class="f-start f-align"> <i><img src="https://th.wsxdn.com/css/img/sanjiao.svg" alt=""></i> <a class='LinkNextArticle' href='https://th.wsxdn.com/db044w/zx451s/1004063863.html' >จะใช้แอตทริบิวต์ formtarget ใน HTML ได้อย่างไร </a> </div> </section> <section class="box1-3"> <ol class="f-between"> <li class="aList-2 aList f-between f-align"> <div> <a href="https://th.wsxdn.com/db044w/zx451s/1004063869.html" class="title"> <p class="r-over r-over-2" title="จะใช้แอตทริบิวต์ formaction ใน HTML ได้อย่างไร "> จะใช้แอตทริบิวต์ formaction ใน HTML ได้อย่างไร </p> </a> </div> </li><li class="aList-2 aList f-between f-align"> <div> <a href="https://th.wsxdn.com/db044w/zx451s/1004063879.html" class="title"> <p class="r-over r-over-2" title="วิธีการใช้หลายแอตทริบิวต์ใน HTML? "> วิธีการใช้หลายแอตทริบิวต์ใน HTML? </p> </a> </div> </li><li class="aList-2 aList f-between f-align"> <div> <a href="https://th.wsxdn.com/db044w/zx451s/1004063880.html" class="title"> <p class="r-over r-over-2" title="จะใช้แอตทริบิวต์ min และ max ใน HTML ได้อย่างไร? "> จะใช้แอตทริบิวต์ min และ max ใน HTML ได้อย่างไร? </p> </a> </div> </li><li class="aList-2 aList f-between f-align"> <div> <a href="https://th.wsxdn.com/db044w/zx451s/1004063881.html" class="title"> <p class="r-over r-over-2" title="วิธีการใช้แอตทริบิวต์รายการใน HTML? "> วิธีการใช้แอตทริบิวต์รายการใน HTML? </p> </a> </div> </li> </ol> </section> </section> <aside class="box-r"> <section class="box4-1"> <strong> HTML </strong> <ol> <li class="f-start"> <i> <img src="https://th.wsxdn.com/css/img/article-lan.svg" alt=""> </i> <a href="https://th.wsxdn.com/db044w/if454a/1004039098.html" title="CSS ความสูงและความกว้าง "> <p class="r-over r-over-2">CSS ความสูงและความกว้าง </p> </a> </li> <li class="f-start"> <i> <img src="https://th.wsxdn.com/css/img/article-lan.svg" alt=""> </i> <a href="https://th.wsxdn.com/db044w/zx451s/1004054538.html" title="วิธีใช้แอตทริบิวต์ที่กำหนดเองใน HTML "> <p class="r-over r-over-2">วิธีใช้แอตทริบิวต์ที่กำหนดเองใน HTML </p> </a> </li> <li class="f-start"> <i> <img src="https://th.wsxdn.com/css/img/article-lan.svg" alt=""> </i> <a href="https://th.wsxdn.com/db044w/zx451s/1004054545.html" title="วิธีใช้รายการ HTML (<ul>, <ol>, <dl>) "> <p class="r-over r-over-2">วิธีใช้รายการ HTML (<ul>, <ol>, <dl>) </p> </a> </li> <li class="f-start"> <i> <img src="https://th.wsxdn.com/css/img/article-lan.svg" alt=""> </i> <a href="https://th.wsxdn.com/db044w/zx451s/1004054548.html" title="วิธีใช้แอตทริบิวต์ HTML "> <p class="r-over r-over-2">วิธีใช้แอตทริบิวต์ HTML </p> </a> </li> <li class="f-start"> <i> <img src="https://th.wsxdn.com/css/img/article-lan.svg" alt=""> </i> <a href="https://th.wsxdn.com/db044w/ec452w/1004056567.html" title="วิธีตั้งค่าความสูงและความกว้างของวิวพอร์ตใน CSS "> <p class="r-over r-over-2">วิธีตั้งค่าความสูงและความกว้างของวิวพอร์ตใน CSS </p> </a> </li> </ol> </section> <ul> <li class="f-start f-align"> <a href="https://th.wsxdn.com/db044w/zx451s/1004063852.html" class="i-text"><p class="r-over r-over-3">จะใช้แอตทริบิวต์ formnovalidate ใน HTML ได้อย่างไร </p></a> </li> <li class="f-start f-align"> <a href="https://th.wsxdn.com/db044w/zx451s/1004063853.html" class="i-text"><p class="r-over r-over-3">จะใช้แอตทริบิวต์ novalidate ใน HTML ได้อย่างไร </p></a> </li> <li class="f-start f-align"> <a href="https://th.wsxdn.com/db044w/zx451s/1004063862.html" class="i-text"><p class="r-over r-over-3">จะใช้แอตทริบิวต์ความสูงและความกว้างใน HTML ได้อย่างไร </p></a> </li> <li class="f-start f-align"> <a href="https://th.wsxdn.com/db044w/zx451s/1004063863.html" class="i-text"><p class="r-over r-over-3">จะใช้แอตทริบิวต์ formtarget ใน HTML ได้อย่างไร </p></a> </li> <li class="f-start f-align"> <a href="https://th.wsxdn.com/db044w/zx451s/1004063866.html" class="i-text"><p class="r-over r-over-3">จะใช้แอตทริบิวต์ formnctype ใน HTML ได้อย่างไร? </p></a> </li> </ul> <ul class="types f-between"> <li><a class='childclass' href='https://th.wsxdn.com/db044w/hf444z/' target="_self">การเขียนโปรแกรม C</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/bz445u/' target="_self">C++</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/tr446l/' target="_self">Redis</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/rp447j/' target="_self">การเขียนโปรแกรม BASH</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/wu448o/' target="_self">Python</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/nl449f/' target="_self">Java</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/ig450a/' target="_self">ฐานข้อมูล</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/zx451s/' target="_self">HTML</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/ec452w/' target="_self">Javascript</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/db453v/' target="_self">การเขียนโปรแกรม</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/if454a/' target="_self">CSS</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/ge455y/' target="_self">Ruby</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/xv456p/' target="_self">SQL</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/jh457b/' target="_self">IOS</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/om458g/' target="_self">Android</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/mk459f/' target="_self">MongoDB</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/rp460j/' target="_self">MySQL</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/qn461i/' target="_self">C#</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/jh465b/' target="_self">PHP</a></li> <li><a class='childclass' href='https://th.wsxdn.com/db044w/kh471c/' target="_self">SQL Server</a></li> </ul> </aside> </section> <footer> <section class="msg f-center container"> <span class="f-start"> ลิขสิทธิ์ © <a href="https://th.wsxdn.com">https://th.wsxdn.com</a> สงวนลิขสิทธิ์ </span> </section> </footer> </body> </html>