การแทรกภาพในเว็บเพจนั้นบ้างครั้งภาพอาจจะมีขนาดใหญ่หรือมีขนาดเล็ก ซึ่งเราสามารถกำหนดขนาดของภาพได้ เพื่อความเหมาุะสมในการนำเสนอ ในการปรับขนาดของภาพจะใช้การกำหนดความกว้างและความสูงของภาพด้วยแอททริบิวท์ width และ height
แอททริบิวท์ (Attribute)
ชื่อแอททริบิวท์ | width , height |
ตำแหน่งแท็ก | <img > |
รูปแบบการใช้แท็ก | <img src="url" width="ความกว้าง" height="ความสูง"> |
value | กำหนดค่าเป็นจำนวนพิกเซลหรือเป็น % |
<img src="jv1.jpg"> <br>
กำหนดภาพขนาดปกติ <br><br>
<img src="jv1.jpg" width="200"> <br>
กำหนดความกว้างของภาพ 200 พิกเซล
จากตัวอย่างเป็นการกำหนดขนาดภาพด้วยการกำหนดที่ความกว้างเพียงอย่างเดียว ส่วนความสูงก็จะปรับขนาดให้โดยอัตโนมัติ และจะทำให้ภาพนั้นมีสัดส่วนที่ผิดไปจากเดิม
การปรับขนนาดความกว้างและความสูงของภาพ
ตัวอย่างต่อไปจะเป็นการกำหนดขนาดของภาพ ด้วยการกำหนดทั้งความกว้างและความสูง
<img src="flower.jpg"> <br>
กำหนดภาพขนาดปกติ <br><br>
<img src="flower.jpg" width="500" height="200"> <br>
กำหนดความกว้างของภาพ 500X200 พิกเซล
จากตัวอย่างการปรับขนาดของภาพด้วยการกำหนดทั้งความกว้างและความสูงของภาพ ถ้าหากกำหนดแล้วทำให้สัดส่วนขนาดของภาพผิด ก็จะทำให้ภาพมีอัตราส่วนที่ผิดเพี้ยนไปจากเดิม ซึ่งในการปรับขนาดของภาพจะนิยมกำหนดเพียงอย่างใดอย่างหนึ่ง เพื่อไม่ทำให้อัตราส่วนของภาพผิดเพี้ยน