ย่อขยายรูปภาพ

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

การย่อรูปที่แสดงผลที่หน้าเว็บ
1.พิมพ์ <img src=”image.url” โดยที่ image.url คือตำแหน่งที่เก็บรูป ถ้ายังไม่เข้าใจให้ย้อนกัลับไปอ่าน 2 บทความก่อนหน้านี้
2.พิมพ์ width=”x” height=”y” โดยที่ x คือความกว่าง y คือความสูง มีหน่วยเป็น pixel
3.ใส่ attribute อื่นของ img ได้ตามที่ต้องการ จากนั้นปิดท้ายด้วย />

<h1>MindWebHost host ที่บริการด้วยใจ</h1>
<img src=”mindwebhost_logo.png” width=”30px” height=”30px” alt=”host คุณภาพ บริการด้วยใจ”/>
<p> หากคุณกำลังมองหา host สำหรับเว็บของคุณ
mindwebhost.com เป็นตัวเลือกสำหรับคุณแล้ว
บริการอย่างมั่นคงมาตั้งแต่ ปี 2549 จนถึงปัจจุบัน
เน้นคุณภาพไม่ใช่ปริมาณ มั่นใจได้ในคุณภาพ</p>
สิ่งเพิ่มเติมที่ 5.5 โค้ดแสดงผลของรูปภาพที่มีการกำหนดขนาดไว้ ให้กว้าง 30 pixel สูง 30 pixel

รูปภาพที่มีขนาดเล็กลงตามขนาดที่เราได้กำหนดเอาไว้
สิ่งเพิ่มเติมที่ 5.6 รูปภาพที่มีขนาดเล็กลงตามขนาดที่เราได้กำหนดเอาไว้

เพิ่มเติม
- คุณสามารถใช้ % กับค่าในข้อที่ 2 ได้โดยจะเป็นการวัดจากขนาดของ window (ไม่ใช่จากขนาดรูปที่แท้จริง)
- ใช้ width และ height เพื่อการเปลี่ยนขนาดที่ใช้แสดงผลของรูปภาพเท่านั้น ไม่ใช่เครื่องมือสำหรับการแก้ไขภาพให้มีขนาดเล็กลงแต่อย่างใด และ user ก็มีวิธีดูภาพขนาดเต็มด้วยเช่นกัน ดังนั้น ถ้าเราต้องการให้รูปขนาดปรกติมีขนาดเล็กลงเราควรตใช้โปรแกรมสำหรับการแก้ไขรูปเท่านั้น
- คุณสามารถกำหนดความกว้างและสูงให้เป็นค่าใดก็ได้ตามที่ต้องการ จะเล็กหรือใหญ่กว่ารูปขนาดจริงก็ได้
- คุณสามารถใช้ style เพื่อกำหนดขนาดของรูปได้ด้วยเช่นกัน

No comments yet.
You must be logged in to post a comment.