HTML <img> การกำหนดความกว้าง
การกำหนดและการใช้งาน
width 属性กำหนดความกว้างของภาพ ด้วยหน่วยเปอกซ์เอล
คำเตือน：กำหนด height และ width 属性เป็นวิธีดีที่ควรปฏิบัติ หากกำหนดของนี้ จะสามารถให้ช่องว่างให้กับภาพเมื่อโหลดหน้าเว็บได้ หากไม่มีของนี้ บราวเซอร์จะไม่ทราบขนาดของภาพ จึงไม่สามารถปกป้องช่องว่างที่เหมาะสมได้ ดังนั้นเมื่อภาพโหลด การจัดเรียงของหน้าเว็บจะเปลี่ยนแปลง (ในบทที่มาดังนี้มีการอธิบายรายละเอียดเพิ่มเติมเกี่ยวกับมุมมองนี้)
คำเตือน：โปรดไม่ผ่าน height และ width 属性เพื่อยกยับภาพกราฟฟิก ถ้าผ่าน height และ width 属性เพื่อลดขนาดภาพกราฟฟิก ผู้ใช้จะต้องดาวน์โหลดภาพขนาดใหญ่ (แม้ว่าภาพจะดูเล็กบนหน้าเว็บ) วิธีที่ถูกต้องคือ ก่อนที่จะใช้ภาพในเว็บไซต์ ควรประมวลผลภาพด้วยซอฟต์แวร์เพื่อขนาดที่เหมาะสม
อ่านเพิ่มเติมรายละเอียด attribute height และ width
ตัวอย่าง
ภาพที่สูง 600 พิกเซล และกว้าง 500 พิกเซล：
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
รูปแบบ
<img width="pixels">
ค่าของอัตราทางตัวแทน
| ค่า | คำอธิบาย |
|---|---|
| pixels | กำหนดความกว้างของรูปภาพด้วยพิกเซล (ตัวอย่าง width="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
คุณเคยเห็นเมื่อเอกสารโหลดเนื้อหาจะเคลื่อนตัวไม่สม่ำสมอหรือไม่? สาเหตุที่เกิดขึ้นนี้เนื่องจากเบราเซอร์ต้องปรับปรุงแนวโน้มของหน้าเว็บเพื่อแสดงภาพที่โหลดทุกภาพ และจะดาวน์โหลดและตรวจสอบความกว้างและความสูงของภาพเพื่อตัดสินขนาดของภาพ. หลังจากนั้น เบราเซอร์จะทำให้มีช่องว่างแบบสี่เหลี่ยมผืนผ้าที่เท่ากับขนาดของภาพในหน้าตัวแสดง. จากนั้น เบราเซอร์จะปรับปรุงแนวโน้มการแสดงหน้าเว็บเพื่อใส่ภาพเข้าไปในหน้าตัวแสดง. นี่ก็เป็นการบอกเราว่าภาพเป็นไฟล์ที่เป็นอิสระ และมันจะถูกดาวน์โหลดแยกต่างหากจากไฟล์ต้นฐาน.
แต่นี่ไม่ใช่วิธีที่มีประสิทธิภาพที่สุดในการแสดงเอกสาร เนื่องจากเบราเซอร์จะต้องตรวจสอบและคำนวณช่องว่างที่จะแสดงภาพทุกภาพก่อนที่จะแสดงเนื้อหาที่อยู่ข้างหน้าและหลังเอกสาร. นี่อาจนำไปสู่การลดลงอย่างมากของเวลาในการแสดงเอกสาร ซึ่งอาจทำให้ผู้ใช้ต้องหยุดอ่าน.
สำหรับผู้สร้าง วิธีที่มีประสิทธิภาพมากขึ้นคือการกำหนดขนาดของภาพด้วย属性 height และ width ของแบบฟอร์ม <img>. ดังนั้น เบราเซอร์จะจัดหาสถานที่สำหรับภาพก่อนที่จะดาวน์โหลดภาพ ซึ่งสามารถเร่งการแสดงเอกสารด้วย และยังเป็นการป้องกันไม่ให้เนื้อหาของเอกสารเคลื่อนตัว. ทั้งสองอาทิตย์นี้ต้องเป็นตัวเลขเต็มและแสดงขนาดภาพด้วยพิกเซล. ลำดับที่อาทิตย์นี้ปรากฏในแบบฟอร์ม <img> ไม่มีความสำคัญ.
ประเด็นของ属性 height และ width
แม้ว่า属性 height และ width ของแบบฟอร์ม <img> จะช่วยปรับปรุงประสิทธิภาพและให้คุณสามารถทำทักษะที่เล็กๆ แต่ในขณะที่ใช้งานนั้นมีประโยชน์ลบบางอย่างที่เป็นปัญหา. แม้ว่าผู้ใช้ได้ปิดการดาวน์โหลดภาพอัตโนมัติแล้ว แต่เบราเซอร์ยังจะแสดงช่องว่างที่มีขนาดที่กำหนดเพื่อภาพภายใน. และนั่นทั่วไปแสดงให้ผู้อ่านเห็นโค้งว่างที่มีสัญลักษณ์ที่ไม่มีนัยมาตรฐานเพื่อแสดงว่านี่คือที่ที่ภาพจะถูกจัดวาง. ในกรณีนี้ หน้าเว็บจะดูน่าเหมือนยังไม่เสร็จและเนื้อหาส่วนใหญ่จะไม่มีประโยชน์. หากไม่ใช้ขนาดที่กำหนดนี้ เบราเซอร์จะแสดงภาพเสริมภายในข้อความ และนั่นที่น้อยก็มีข้อความที่สามารถอ่านได้.
สำหรับประเด็นนี้เรายังไม่มีแนวทางแก้ปัญหา แต่เรายังคงเน้นความสำคัญที่คุณต้องใช้ รายละเอียด alt และข้อความเรียกเรื่องเช่นนี้ ผู้อ่านจะทราบว่ามีอะไรหายไป แต่เรายังแนะนำให้คุณใช้ขนาดนี้เพราะเราสนับสนุนการปฏิบัติที่ช่วยปรับปรุงประสิทธิภาพของเครือข่าย
การสนับสนุนเบราเซอร์
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| สนับสนุน | สนับสนุน | สนับสนุน | สนับสนุน | สนับสนุน |
