ความกว้างของรูปภาพใน HTML
โดยค่าเริ่มต้น รูปภาพจะแสดงผลด้วยขนาดจริงของมัน ตัวอย่างเช่น รูปภาพ
ยิ้มที่เราแสดงผลข้างต้น มีขนาดจริง 130 คูณ 130
พิกเซล และเราก็เห็นรูปภาพขนาดนั้นในเบราว์เซอร์
หากต้องการ สามารถเปลี่ยนขนาดรูปภาพได้
โดยการกำหนดความกว้างให้มัน สิ่งนี้ทำได้โดยใช้แอตทริบิวต์
width
ลองมาดูตัวอย่าง กำหนดความกว้างให้รูปภาพของเรา
เป็น 100 พิกเซล โดยกำหนดค่า
แอตทริบิวต์ width เป็นตัวเลข 100
แบบนี้:
width="100"
แล้วรูปภาพบนหน้าจอจะมีขนาดเท่าไหร่?
อาจจะคิดว่าเป็นดังนี้: ความกว้าง 100
พิกเซล ตามที่เรากำหนด และความสูงจริง
130 เนื่องจากเราไม่ได้กำหนดมัน ที่
จริงแล้ว มันจะไม่เป็นเช่นนั้น
ความกว้างจะเท่ากับ 100 พิกเซลจริงๆ
แต่ความสูงจะปรับตามเพื่อให้สัดส่วน
ของรูปภาพไม่บิดเบือน นั่นคือจะกลายเป็น
100 พิกเซลด้วย
ลองรันและมาดูกัน:
<img src="smile.png" width="100">
:
ตั้งค่าความกว้างของรูปภาพของคุณเป็น 300
พิกเซล
