วิธีการ กำหนดความกว้างและความสูงของรูปด้วยโค้ด HTML

attribute ความกว้างและความสูงใน HTML ใช้กำหนดขนาดของรูปเป็นพิกเซลได้ ถ้าใช้ HTML 4.01 ความสูงจะเป็นพิกเซลหรือ % ขององค์ประกอบที่มีก็ได้ แต่ถ้าใช้ HTML5 ค่าต้องเป็นพิกเซลเท่านั้น บทความวิกิฮาวนี้จะแนะนำวิธีการกำหนดขนาดรูปด้วยโค้ด HTML ให้คุณเอง

ขั้นตอน

ดาวน์โหลดบทความ

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/82\/Set-Image-Width-and-Height-Using-HTML-Step-1-Version-3.jpg\/v4-460px-Set-Image-Width-and-Height-Using-HTML-Step-1-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/82\/Set-Image-Width-and-Height-Using-HTML-Step-1-Version-3.jpg\/v4-728px-Set-Image-Width-and-Height-Using-HTML-Step-1-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

ทั้ง Windows และ Mac จะมีโปรแกรม text editor ติดมาแต่แรก เช่น Notepad และ Text Edit ใช้สร้างและแก้ไขโค้ด HTML ได้เลย คุณเปิดไฟล์โค้ด HTML ในโปรแกรมได้โดยคลิก Open ใน tab File หรือคลิกขวาที่ไฟล์ใน file browser แล้วคลิก Open With…
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/00\/Set-Image-Width-and-Height-Using-HTML-Step-2-Version-3.jpg\/v4-460px-Set-Image-Width-and-Height-Using-HTML-Step-2-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/00\/Set-Image-Width-and-Height-Using-HTML-Step-2-Version-3.jpg\/v4-728px-Set-Image-Width-and-Height-Using-HTML-Step-2-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

2
เพิ่มโค้ดต่อไปนี้ใน script. <img src="imagefile.jpg" alt="Image" height="42" width="42">
- src คือ file path ของรูป
- alt คือแท็กที่คุณกำหนดให้รูปนั้น
- ค่าที่กรอกต้องเป็นพิกเซล
- หรือใช้แท็ก style เช่น พิมพ์โค้ดดังต่อไปนี้ในไฟล์โค้ดของคุณ <img src="imgfile.jpg" alt="Image" style="width:500px;height:600px;"> ตัวแท็ก style ใช้กำหนดให้รูปมีขนาดนั้น ทับคำสั่งกำหนดขนาดรูปอื่นๆ นอกเหนือจากนี้ ^{[1]
  X
  แหล่งข้อมูลอ้างอิง}
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/be\/Set-Image-Width-and-Height-Using-HTML-Step-3-Version-3.jpg\/v4-460px-Set-Image-Width-and-Height-Using-HTML-Step-3-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/be\/Set-Image-Width-and-Height-Using-HTML-Step-3-Version-3.jpg\/v4-728px-Set-Image-Width-and-Height-Using-HTML-Step-3-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

เช่น ถ้าพิมพ์ 21 ใน width และ 21 ใน height จะได้รูปที่ลดขนาดจากต้นฉบับลงไปครึ่งหนึ่ง
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a5\/Set-Image-Width-and-Height-Using-HTML-Step-4-Version-3.jpg\/v4-460px-Set-Image-Width-and-Height-Using-HTML-Step-4-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a5\/Set-Image-Width-and-Height-Using-HTML-Step-4-Version-3.jpg\/v4-728px-Set-Image-Width-and-Height-Using-HTML-Step-4-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

เซฟแล้วเปิดไฟล์ด้วยเบราว์เซอร์ไหนก็ได้ เพื่อติดตามผล. ถ้าอยากปรับขนาดรูปใหม่ ให้ทำซ้ำตามขั้นตอนที่ผ่านๆ มา ^{[2]
X
แหล่งข้อมูลอ้างอิง}

โฆษณา

เคล็ดลับ

ต้องระบุ attribute ทั้งความสูงและความกว้างของรูป ถ้ากำหนดค่าความกว้างและความสูงแล้ว เท่ากับล็อคที่ว่างไว้ให้รูปตอนโหลดหน้าเว็บ แต่ถ้าไม่ได้กำหนด attribute พวกนี้ เบราว์เซอร์จะไม่รู้ขนาดของรูป เลยไม่ได้ล็อคพื้นที่ที่จำเป็นไว้ ทำให้ layout ของหน้าเว็บเปลี่ยนตอนโหลด (ตอนโหลดรูป)
การย่อรูปใหญ่ๆ ด้วยค่าความสูงและความกว้าง เท่ากับบังคับให้ user ดาวน์โหลดรูปขนาดใหญ่ (ถึงจะดูเล็กในหน้าเว็บ) แก้ได้โดย ปรับขนาดรูป ในโปรแกรมก่อนเอามาใช้ในเว็บ

โฆษณา

[1]

[2]

เข้าสู่ระบบ

วิธีการ กำหนดความกว้างและความสูงของรูปด้วยโค้ด HTML

ขั้นตอน

เคล็ดลับ

บทความวิกิฮาวอื่น ๆ ที่่เกี่ยวข้อง

ข้อมูลอ้างอิง

เกี่ยวกับวิกิฮาวนี้

บทความนี้เป็นประโยชน์กับคุณไหม

บทความที่เกี่ยวข้อง

บทความฮาว-ทูที่โดดเด่น

บทความฮาวทูที่ติดเทรนด์

บทความฮาว-ทูที่โดดเด่น

บทความฮาว-ทูที่โดดเด่น

บทความฮาว-ทูที่โดดเด่น

บทความฮาว-ทูที่โดดเด่น

Explore Categories