HTML <img> นามสาขา height

HTML แบบ <img> แทรก

คำนิยามและวิธีใช้

height นามสาขานี้กำหนดความสูงของรูปภาพ ด้วยหน่วยเป็นพิกเซล

คำเตือน：โปรดระบุ height และ width นามสาขา。ถ้ากำหนดความสูงและความกว้าง จะมีช่องว่างสำหรับรูปภาพที่จะโหลดเข้ามาในขณะที่โหลดหน้าเว็บ ซึ่งไม่มีนับถือถึงความสูงและความกว้างนี้ บราวเซอร์ก็ไม่ทราบขนาดของรูปภาพ และจึงไม่สามารถจัดหาช่องว่างเหมาะสมสำหรับรูปภาพได้ ซึ่งก็จะทำให้การจัดแนวหน้าของหน้าเว็บเปลี่ยนแปลงไปในขณะที่รูปภาพกำลังโหลด (ขณะที่รูปภาพโหลดเข้ามา)

คำเตือน：ใช้ height และ width คุณสมบัติขนาดเล็กภาพใหญ่จะบังคับให้ผู้ใช้ดาวน์โหลดภาพใหญ่ (แม้ว่ามันจะดูเล็กบนหน้าเว็บ) เพื่อหลีกเลี่ยงสถานการณ์นี้ กรุณาปรับขนาดภาพด้วยโปรแกรมประมวลภาพก่อนที่จะใช้ภาพในหน้าเว็บ

อ่านเพิ่มเติมรายละเอียด attribute height และ width

ตัวอย่าง

ภาพขนาด 600 พิกเซล กว้าง 500 พิกเซล

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

ทดลองด้วยตัวเอง

ศัพท์ทั้งหมด

<img height="pixels">

ค่าของคุณสมบัติ

ค่า คำอธิบาย
pixels กำหนดความสูงของภาพ ด้วยหน่วยเปอร์เซ็นต์ (ตัวอย่าง: height="100")

ตัวอย่างเพิ่มเติม

เปลี่ยนขนาดภาพ - การทำภาพที่กระจายพื้นที่

คุณสมบัติ height และ width มีคุณสมบัติลับๆ คือ คุณไม่จำเป็นต้องกำหนดขนาดของภาพที่แท้จริง นั่นก็คือ ค่าทั้งสองค่านี้อาจมากกว่าขนาดที่แท้จริงหรือน้อยกว่าขนาดที่แท้จริง บราวเซอร์จะปรับเปลี่ยนภาพโดยอัตโนมัติเพื่อที่จะสอดคล้องกับขนาดที่กำหนดไว้ ใช้วิธีนี้เพื่อสร้างภาพที่เล็กๆ ที่สามารถขยายขนาดได้ง่ายๆ และสร้างภาพย่อที่ใหญ่ แต่จำเป็นต้องจำแนกใจว่า บราวเซอร์ยังจะต้องดาวน์โหลดไฟล์ทั้งหมด ไม่ว่าขนาดที่ที่ที่จะแสดงที่หน้าเว็บเท่าไร และ ถ้าไม่รักษาสัดส่วนของกว้างต่อสูงของภาพ เมื่อขยายขนาด ภาพจะเกิดการโค้งนวม

ลูกตรงที่ใช้คุณสมบัติ height และ width อีกอันหนึ่ง คือการทำงานเพื่อให้เข้ากันด้วยวิธีที่ง่ายสำหรับการกระจายพื้นที่ของหน้าเว็บและยังสามารถปรับปรุงการทำงานของเอกสารด้วยด้วยเช่น นับได้ว่าหากคุณต้องการจะใส่บาร์สีสีในเอกสารของคุณ คุณไม่จำเป็นต้องสร้างภาพที่มีขนาดที่เท่ากับขนาดที่คุณต้องการ ทั้งสอง มากกว่านั้น แต่คุณแค่สร้างภาพที่มีความกว้างและสูง 1 พิกเซลและให้สีที่คุณต้องการใช้ใส่เข้าไป หลังจากนั้นใช้คุณสมบัติ height และ width ให้เข้าไปเพื่อขยายขนาดของภาพให้ใหญ่ขึ้น

<img src="/i/ct_1px.gif"} width="200px" height="30px" />

นี่คือผลลัพธ์ของ HTML ด้านบน สีบาร์นี้ที่สร้างขึ้นด้วยภาพที่มีขนาดเพียง 1 พิกเซลเท่านั้น：

ใช้ตัวเลขเปอร์เซ็นต์

ลูกตรงที่แสดงถึงการใช้คุณสมบัติ width คือการใช้ตัวเลขเปอร์เซ็นต์แทนค่าหน่วยขนาดจริง ซึ่งจะทำให้บราวเซอร์ยังทำการย่อยขนาดภาพตามสัดส่วนของหน้าต่างการแสดงของบราวเซอร์ ดังนั้น ถ้าต้องการสร้างบาร์สีสีที่กว้างเท่ากับขนาดหน้าต่างการแสดงและสูง 30 พิกเซล สามารถทำได้ดังนี้：

<img src="/i/ct_1px.gif"} width="60%" height="30px" />

ขณะที่ขนาดของหน้าต่างเอกสารเปลี่ยนแปลง ขนาดของภาพจะเปลี่ยนแปลงด้วย：

คำเตือน：ถ้าได้เสนอค่า width ในรูปแบบเปอร์เซ็นต์และละเลย height แล้ว ไม่ว่าจะขยายตัวหรือลดลง บราวเซอร์จะเก็บความสัมพันธ์ของขนาดกว้างต่อสูงของภาพตัวเองตลอดเวลา。นี่หมายความว่าส่วนสูงของภาพเทียบกับกว้างจะไม่เปลี่ยนแปลง ภาพจึงจะไม่เกิดการโค้งนวม

โปรดดู HTML ต่อไปนี้：

<img src="/i/ct_1px.gif"} width="20%" />

หมายความว่า ถ้าคุณตั้งค่าค่าเปอร์เซ็นต์ของ width ของภาพ ct_1px.gif แล้ว จะได้ภาพสี่เหลี่ยมผืนผ้าที่เป็นทรงกลม (เพราะ ct_1px.gif มีขนาดเพียง 1px กว้างและสูง)


ทดลองด้วยตัวเอง

คำเตือน：เราได้ให้ตัวอย่างดังกล่าวเพื่อที่คุณจะเข้าใจวิธีใช้ attribute height และ width ได้ดียิ่งขึ้น หากคุณต้องการใช้สีเดียวที่ใหญ่ๆ ที่ใช้เพื่อตกแต่งหน้าเว็บ แล้ววิธีที่ดีที่สุดคือใช้ CSS สร้างสีพื้นหลัง.

รายละเอียด attribute height และ width

เหตุใดที่จะใช้ attribute height และ width

คุณเคยเห็นเนื้อหาของเอกสารที่เรียกขึ้นมาและเคลื่อนย้ายไม่มีระบบหรือบ้าง สาเหตุที่เกิดขึ้นนี้เพราะโปรแกรมนิวเวิร์คต้องปรับปรุงโครงสร้างหน้าเว็บเพื่อแสดงภาพที่เรียกขึ้นมาทุกภาพ โดยดาวน์โหลดและตรวจสอบขนาดกว้างและสูงของภาพ แล้วจะวางช่องว่างสี่เหลี่ยมผืนผ้าที่เท่ากับขนาดของภาพ หลังจากนั้นโปรแกรมนิวเวิร์คจะปรับปรุงโครงสร้างการแสดงเพื่อใส่ภาพไปที่ช่องว่างนั้น ซึ่งก็บอกว่าภาพเป็นไฟล์อิสระ และจะดาวน์โหลดแยกจากไฟล์ต้นทาง

แต่นี่ไม่ใช่วิธีแสดงเอกสารที่มีประสิทธิภาพที่สุด เพราะโปรแกรมนิวเวิร์คจะต้องตรวจสอบและคำนวณพื้นที่ทางจอของแต่ละภาพก่อนที่จะแสดงเนื้อหาที่อยู่ข้างเคียงและหลังมา ซึ่งอาจก่อให้เกิดการล่าช้าในการแสดงเอกสาร และหยุดยั้งการอ่านของผู้ใช้

สำหรับผู้สร้าง วิธีที่มีประสิทธิภาพมากขึ้นคือการกำหนดขนาดของภาพด้วย attribute height และ width ของแบบฟอร์ม <img> ซึ่งทำให้โปรแกรมนิวเวิร์คจะเตรียมที่สำหรับภาพก่อนที่จะดาวน์โหลดภาพ ซึ่งสามารถเร่งการแสดงเอกสารด้วย และหลีกเลี่ยงการเคลื่อนย้ายของเนื้อหาของเอกสาร ทั้งสองประกาศต้องเป็นตัวเลขเต็มและแสดงขนาดภาพด้วยพิกเซล ลำดับที่ประกาศเหล่านี้ปรากฏในแบบฟอร์ม <img> ไม่มีความสำคัญ

ประเด็นของ attribute height และ width

แม้ว่า属性 height และ width ของแบบฟอร์ม <img> จะช่วยในการปรับปรุงประสิทธิภาพและให้ความสามารถในเทคนิคเล็กๆ แต่ในขณะที่ใช้งานเขามีประโยชน์ที่ท้าทายและมีผลลบบางอย่าง โดยที่ผู้ใช้ได้ปิดการดาวน์โหลดภาพอัตโนมัติแล้ว โปรแกรมนิวเวิร์คยังต้องแสดงช่องว่างที่มีขนาดที่กำหนดเพื่อภาพอย่างนั้น ซึ่งมักจะให้ผู้อ่านเห็นโม้งช่องว่างที่มีสัญลักษณ์ที่ไม่มีความหมาย ที่แสดงว่านี่คือที่ที่จะมีภาพอยู่ และทำให้หน้าเว็บดูแย่ลงเหมือนไม่ได้เสร็จงานเสมอ และส่วนใหญ่ของเนื้อหาจะไม่มีประโยชน์เลย ถ้าไม่ใช้ขนาดที่กำหนดแล้ว โปรแกรมนิวเวิร์คจะแสดงภาพไซกอนของภาพอยู่บนข้อความ ซึ่งมีข้อความที่สามารถอ่านได้มากกว่านี้

สำหรับประเด็นนี้ เรายังไม่มีแนวทางแก้ปัญหา แต่เรายังคงเน้นว่าควรใช้ คุณสมบัติ alt และข้อความที่มีความเหมาะสมดังนั้น ผู้อ่านอาจจะรู้ว่ามีอะไรหายไป แต่เรายังแนะนำให้คุณใช้คุณสมบัติขนาดนี้ เพราะเราสนับสนุนการปฏิบัติที่จะช่วยปรับปรุงประสิทธิภาพของเครือข่าย

การสนับสนุนโปรแกรมนี้

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน

HTML แบบ <img> แทรก