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

ในคู่มือนี้ คุณจะได้เรียนรู้วิธีการปรับขนาดรูปภาพในรูปแบบ HTML

ก่อนเริ่มต้น จำเป็นต้องเพิ่มรูปภาพลงในไฟล์ HTML ซึ่งจะดำเนินการปรับขนาดรูปภาพ

วิธีการฝังรูปภาพใน HTML?

ในการเพิ่มรูปภาพใน HTML ให้ใช้ไวยากรณ์ต่อไปนี้:

คำอธิบายของไวยากรณ์ที่กล่าวถึงข้างต้นได้อธิบายไว้ด้านล่าง “ img แท็ก ” ใช้สองแอตทริบิวต์:

• • “เอสอาร์ซี” ใช้เพื่อระบุเส้นทาง (URL) ของรูปภาพ
  • 'ทุกอย่าง' ใช้เพื่อระบุข้อความแสดงแทนหากรูปภาพไม่แสดง

HTML

รหัสด้านล่างแสดงถึงสอง divs ใน div แรก เราได้เพิ่มหัวข้อที่กึ่งกลางด้านบนของหน้าเว็บเป็น ' ขนาดรูปภาพใน HTML ” โดยใช้แท็ก

:

< div >
< ศูนย์กลาง >
< ชั่วโมง1 > ขนาดรูปภาพ ใน HTML ชั่วโมง1 >
ศูนย์กลาง >
div >

div ที่สองถูกเพิ่มด้วยคลาสชื่อ “ คอนเทนเนอร์ ” และเพื่อแสดงภาพตรงกลาง เราได้ใช้แท็ก

ภายในศูนย์ให้เขียนโค้ดด้านล่างเพื่อเพิ่มรูปภาพ:

< div ระดับ = 'คอนเทนเนอร์' >
< ศูนย์กลาง >
< img src = 'ภาพ/ผีเสื้อ.jpg' ทุกอย่าง = 'สลับข้อความ' >
ศูนย์กลาง >
div >

ภาพที่เลือกด้วย “ 640*437 ” อัตราส่วนภาพจะมีลักษณะดังนี้:

ส่วนถัดไปจะสาธิตวิธีการปรับขนาดรูปภาพ

วิธีการปรับขนาดรูปภาพใน HTML?

คุณสามารถกำหนดขนาดของภาพหรือปรับขนาดได้โดยใช้ “ ความกว้าง ' และ ' ความสูง ” เพื่อกำหนดความกว้างและความสูง

ตอนนี้ มาตั้งค่าความกว้างของภาพที่เพิ่มเป็น “ 300 ” และดูว่ามันทำงานอย่างไร:

< img src = 'ภาพ/ผีเสื้อ.jpg' ทุกอย่าง = 'สลับข้อความ' ความกว้าง = '300' >

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

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

< img src = 'ภาพ/ผีเสื้อ.jpg' ทุกอย่าง = 'สลับข้อความ' ความกว้าง = '300' ความสูง = '550' >

คุณสามารถสังเกตความแตกต่างของขนาดภาพได้อย่างชัดเจน:

นั่นคือวิธีการใช้แอตทริบิวต์ width และ height เพื่อปรับขนาดรูปภาพ

บทสรุป

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