ของ HTML <img> สัญญาณ height และ width

HTML สกุล <img>

ตัวอย่าง

ตั้งค่าความกว้างและความสูงของภาพในลูกบาศก์เป็น 200 พิกเซล:

<img src="/i/mouse.jpg" height="200" width="200" width="20%"

คุณสามารถทดลองด้วยเครื่องมือทดลองออนไลน์ของเรา

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

สัญญาณ <img> ของ height และ width นั้นกำหนดขนาดของภาพ.

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

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

การอ่านเพิ่มเติมรายละเอียดคุณสมบัติ height และ width

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

การเปลี่ยนขนาดภาพ - การสร้างภาพที่ปิดที่เต็ม

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

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

ที่ดูต่อไปนี้ HTML: width="200px" height="30px" width="20%"

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

การใช้ระดับเปอร์เซ็นต์

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

ที่ดูต่อไปนี้ HTML: width="60%" height="30px" width="20%"

เมื่อขนาดของหน้าเอกสารเปลี่ยนแปลง ขนาดของภาพดังกล่าวก็จะเปลี่ยนแปลงตาม:

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

}}

ที่ดูต่อไปนี้ HTML: <img src="/i/ct_1px.gif" width="20%"

>

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

!คำเตือน:ใช้ CSS ที่จะสร้างสีพื้นหลัง。

การสนับสนุนของเบราเซอร์

ทุกเบราเซอร์ทุกครั้งสนับสนุนคุณสมบัติ height และ width

รูปแบบ

<img height="value" />

หรือ:

<img width="value" />

ค่าคุณสมบัติ

ค่า คำอธิบาย
pixels ขนาดความสูงหรือความกว้างด้วยพิกเซล
percent ขนาดความสูงหรือความกว้างด้วยร้อยละของตัวอย่างที่มีอยู่ในองค์ประกอบ

TIY ตัวอย่าง

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

รายละเอียดคุณสมบัติ height และ width

ทำไมต้องใช้คุณสมบัติ height และ width

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

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

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

ประเด็นของตัวแบบภาพ height และ width

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

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

HTML สกุล <img>