กำหนดความกว้างของรูปภาพด้วย CSS (width)

คุณสมบัติ width สำหรับรูปภาพ

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

ตัวอย่าง

ลองรันโค้ดต่อไปนี้เพื่อกำหนดความกว้างของรูปภาพ:

<html>
  <head>
  </head>
  <body>
    <img style="border:2px solid green; width:100px;" src="https://www.tutorialspoint.com/images/logo.png" />
    <br />
    <img style="border:2px solid green; width:50%;" src="https://www.tutorialspoint.com/images/logo.png" />
  </body>
</html>

รายละเอียด:

• ความยาว: px, em, rem, cm, ฯลฯ
• เปอร์เซ็นต์: % ของความกว้างของ containing block
• auto - ความกว้างเดิมของภาพ (ค่าเริ่มต้น)
• max-width: 100%; height: auto; - ทำให้รูปภาพ responsive