ดาวน์โหลดบทความ
ดาวน์โหลดบทความ
attribute ความกว้างและความสูงใน HTML ใช้กำหนดขนาดของรูปเป็นพิกเซลได้ ถ้าใช้ HTML 4.01 ความสูงจะเป็นพิกเซลหรือ % ขององค์ประกอบที่มีก็ได้ แต่ถ้าใช้ HTML5 ค่าต้องเป็นพิกเซลเท่านั้น บทความวิกิฮาวนี้จะแนะนำวิธีการกำหนดขนาดรูปด้วยโค้ด HTML ให้คุณเอง
ขั้นตอน
-
เปิดไฟล์โค้ด HTML ในโปรแกรม text editor. ทั้ง Windows และ Mac จะมีโปรแกรม text editor ติดมาแต่แรก เช่น Notepad และ Text Edit ใช้สร้างและแก้ไขโค้ด HTML ได้เลย คุณเปิดไฟล์โค้ด HTML ในโปรแกรมได้โดยคลิก Open ใน tab File หรือคลิกขวาที่ไฟล์ใน file browser แล้วคลิก Open With…
-
เพิ่มโค้ดต่อไปนี้ใน 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 แหล่งข้อมูลอ้างอิง
-
-
เปลี่ยนค่า
height
และwidth
. เช่น ถ้าพิมพ์ 21 ในwidth
และ 21 ในheight
จะได้รูปที่ลดขนาดจากต้นฉบับลงไปครึ่งหนึ่ง -
เซฟแล้วเปิดไฟล์ด้วยเบราว์เซอร์ไหนก็ได้ เพื่อติดตามผล. ถ้าอยากปรับขนาดรูปใหม่ ให้ทำซ้ำตามขั้นตอนที่ผ่านๆ มา [2] X แหล่งข้อมูลอ้างอิงโฆษณา
เคล็ดลับ
- ต้องระบุ attribute ทั้งความสูงและความกว้างของรูป ถ้ากำหนดค่าความกว้างและความสูงแล้ว เท่ากับล็อคที่ว่างไว้ให้รูปตอนโหลดหน้าเว็บ แต่ถ้าไม่ได้กำหนด attribute พวกนี้ เบราว์เซอร์จะไม่รู้ขนาดของรูป เลยไม่ได้ล็อคพื้นที่ที่จำเป็นไว้ ทำให้ layout ของหน้าเว็บเปลี่ยนตอนโหลด (ตอนโหลดรูป)
- การย่อรูปใหญ่ๆ ด้วยค่าความสูงและความกว้าง เท่ากับบังคับให้ user ดาวน์โหลดรูปขนาดใหญ่ (ถึงจะดูเล็กในหน้าเว็บ) แก้ได้โดย ปรับขนาดรูป ในโปรแกรมก่อนเอามาใช้ในเว็บ
โฆษณา
ข้อมูลอ้างอิง
โฆษณา