ความกว้างของรูปภาพใน HTML

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

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

ลองมาดูตัวอย่าง กำหนดความกว้างให้รูปภาพของเรา เป็น 100 พิกเซล โดยกำหนดค่า แอตทริบิวต์ width เป็นตัวเลข 100 แบบนี้:

htmlwidth="100"

แล้วรูปภาพบนหน้าจอจะมีขนาดเท่าไหร่? อาจจะคิดว่าเป็นดังนี้: ความกว้าง 100 พิกเซล ตามที่เรากำหนด และความสูงจริง 130 เนื่องจากเราไม่ได้กำหนดมัน ที่ จริงแล้ว มันจะไม่เป็นเช่นนั้น

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

ลองรันและมาดูกัน:

html<img src="smile.png" width="100">

Результат: