:: เมนูหลัก
 แบบทดสอบก่อนเรียน
 หน่วยที่ 1 โลกของเว็บเพจและเว็บไซต์
 หน่วยที่ 2 เริ่มต้นกับ HTML
 หน่วยที่ 3 การจัดการข้อความ
 หน่วยที่ 4 การใช้ลิสต์สร้างรายการ
 หน่วยที่ 5 การแทรกภาพ
 แบบทดสอบก่อนเรียน
รู้จักกับภาพกราฟิกชนิดต่าง ๆ
 การแทรกภาพบนเว็บเพจ
 การใส่ข้อความกำกับภาพ
 การปรับขนาดภาพบนเว็บเพจ
 การจัดรูปภาพร่วมกับข้อความ 
 การใส่ภาพพื้นหลังให้กับเว็บเพจ
 แบบฝึกหัด
 แบบทดสอบหลังเรียน
 หน่วยที่ 6 การสร้างตาราง
 หน่วยที่ 7 การเชื่อมโยงเว็บเพจด้วยลิงค์
หน่วยที่ 8 การใช้งานไฟล์วีดีโอและเสียง
 หน่วยที่ 9 การสร้างฟอร์ม
 แบบทดสอบหลังเรียนเรียน
:: หน่วยที่ 5 การแทรกภาพ
การปรับขนาดภาพบนเว็บเพจ


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

แอททริบิวท์ (Attribute)

Attribute
ชื่อแอททริบิวท์ width , height
ตำแหน่งแท็ก <img >
รูปแบบการใช้แท็ก <img src="url" width="ความกว้าง" height="ความสูง">
value กำหนดค่าเป็นจำนวนพิกเซลหรือเป็น %

 

ตัวอย่างการใช้งาน
<body>
<h2><p align="center">การปรับขนาดภาพ</p></h2>
<img src="jv1.jpg"> <br>
กำหนดภาพขนาดปกติ <br><br>
<img src="jv1.jpg" width="200"> <br>
กำหนดความกว้างของภาพ 200 พิกเซล
</body>

การแสดงผล
การแทรกภาพ

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


การปรับขนนาดความกว้างและความสูงของภาพ

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

ตัวอย่างการใช้งาน
<body>
<h2><p align="center">การปรับขนาดภาพ</p></h2>
<img src="flower.jpg"> <br>
กำหนดภาพขนาดปกติ <br><br>
<img src="flower.jpg" width="500" height="200"> <br>
กำหนดความกว้างของภาพ 500X200 พิกเซล
</body>

การแสดงผล
การแทรกภาพ

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


วีดีโอ