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

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

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

  1. How.com.vn ไท: Step 1 เปิดไฟล์โค้ด HTML ในโปรแกรม text editor.
    ทั้ง Windows และ Mac จะมีโปรแกรม text editor ติดมาแต่แรก เช่น Notepad และ Text Edit ใช้สร้างและแก้ไขโค้ด HTML ได้เลย คุณเปิดไฟล์โค้ด HTML ในโปรแกรมได้โดยคลิก Open ใน tab File หรือคลิกขวาที่ไฟล์ใน file browser แล้วคลิก Open With…
  2. How.com.vn ไท: Step 2 เพิ่มโค้ดต่อไปนี้ใน script.
    <img src="imagefile.jpg" alt="How.com.vn ไท: Image" height="42" width="42">
    • src คือ file path ของรูป
    • alt คือแท็กที่คุณกำหนดให้รูปนั้น
    • ค่าที่กรอกต้องเป็นพิกเซล
    • หรือใช้แท็ก style เช่น พิมพ์โค้ดดังต่อไปนี้ในไฟล์โค้ดของคุณ <img src="imgfile.jpg" alt="How.com.vn ไท: Image" style="width:500px;height:600px;"> ตัวแท็ก style ใช้กำหนดให้รูปมีขนาดนั้น ทับคำสั่งกำหนดขนาดรูปอื่นๆ นอกเหนือจากนี้[1]
  3. How.com.vn ไท: Step 3 เปลี่ยนค่า height และ width.
    เช่น ถ้าพิมพ์ 21 ใน width และ 21 ใน height จะได้รูปที่ลดขนาดจากต้นฉบับลงไปครึ่งหนึ่ง
  4. How.com.vn ไท: Step 4 เซฟแล้วเปิดไฟล์ด้วยเบราว์เซอร์ไหนก็ได้ เพื่อติดตามผล....
    เซฟแล้วเปิดไฟล์ด้วยเบราว์เซอร์ไหนก็ได้ เพื่อติดตามผล. ถ้าอยากปรับขนาดรูปใหม่ ให้ทำซ้ำตามขั้นตอนที่ผ่านๆ มา[2]
    โฆษณา

เคล็ดลับ

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

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

How.com.vn ไท: ทีมงานวิกิฮาว
ร่วมเขียน โดย:
นักเขียนในทีมวิกิฮาว
บทความนี้ร่วมเขียนโดยเหล่าบรรณาธิการและนักวิจัยที่ผ่านการฝึกฝนมาเพื่อความถูกต้องและครอบคลุมของเนื้อหา

ทีมผู้จัดการด้านเนื้อหาของวิกิฮาว จะตรวจตราผลงานจากทีมงานด้านเนื้อหาของเราเพื่อความมั่นใจว่าบทความทุกชิ้นได้มาตรฐานตามที่เราตั้งไว้ บทความนี้ถูกเข้าชม 20,911 ครั้ง
หมวดหมู่: ซอฟท์แวร์
มีการเข้าถึงหน้านี้ 20,911 ครั้ง

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

⚠️ Disclaimer:

Content from Wiki How ไท language website. Text is available under the Creative Commons Attribution-Share Alike License; additional terms may apply.
Wiki How does not encourage the violation of any laws, and cannot be responsible for any violations of such laws, should you link to this domain, or use, reproduce, or republish the information contained herein.

Notices:
  • - A few of these subjects are frequently censored by educational, governmental, corporate, parental and other filtering schemes.
  • - Some articles may contain names, images, artworks or descriptions of events that some cultures restrict access to
  • - Please note: Wiki How does not give you opinion about the law, or advice about medical. If you need specific advice (for example, medical, legal, financial or risk management), please seek a professional who is licensed or knowledgeable in that area.
  • - Readers should not judge the importance of topics based on their coverage on Wiki How, nor think a topic is important just because it is the subject of a Wiki article.

โฆษณา