Responsive Design

หัวข้อนี้คืออะไร

responsive images คือรูปภาพที่ปรับขนาดให้เหมาะกับพื้นที่ที่มี — ไม่ล้น container ไม่บิดสัดส่วน สองบรรทัด CSS นี้แก้ปัญหาได้เกือบทุกกรณี:

img {
  max-width: 100%;   /* ไม่กว้างเกิน container */
  height: auto;      /* รักษาสัดส่วนอัตโนมัติ */
}

ทำไมหัวข้อนี้สำคัญ

รูปภาพที่ไม่ responsive สร้างปัญหาที่เห็นได้ชัด: รูปล้นหน้าจอ — รูปที่กว้าง 800px บนมือถือ 390px ทำให้เกิด scroll bar แนวนอน layout พัง — รูปใน card ที่กว้างเกิน card ทำให้ card ขยายจนเสียรูป รูปบิดสัดส่วน — การใส่ width และ height ตายตัวทั้งคู่โดยไม่คำนึงสัดส่วนต้นฉบับ ข่าวดี: แก้ได้ด้วย 2 บรรทัด CSS เท่านั้น และควรใส่ให้ img ทุกรูปเป็น default

ตัวอย่างจากชีวิตจริง

ลองนึกถึงเว็บที่ใช้ทุกวัน: Pantip / Sanook — รูปประกอบบทความยืดตาม column เนื้อหา บนมือถือแคบลงตาม Lazada / Shopee — รูปสินค้าแสดงในกล่องขนาดเดียวกันทุก card ไม่ว่ารูปต้นฉบับจะกว้างแค่ไหน Facebook / IG — รูปโพสต์ยืดเต็มความกว้าง feed ทั้งบนมือถือและ desktop ทั้งหมดนี้ทำงานได้ด้วย max-width: 100% เป็นพื้นฐาน บวกกับ object-fit สำหรับ case ที่ต้องการ crop รูปให้พอดีกรอบ

แนวคิดหลักที่ต้องเข้าใจ

CSS 3 อย่างที่ใช้บ่อยกับรูปภาพ: max-width: 100% — รูปไม่กว้างเกิน container ไม่ว่า container จะแคบแค่ไหน height: auto — ความสูงคำนวณอัตโนมัติตามสัดส่วนต้นฉบับ ไม่บิด object-fit — ใช้เมื่อต้องการกำหนดขนาดกล่อง แล้วให้รูป cover หรือ contain ให้พอดี ลองปรับขนาด preview ด้านล่าง — สังเกตว่ารูปซ้าย (responsive) กับขวา (ไม่ responsive) ต่างกันอย่างไร:

การทำงานทีละขั้นตอน

วิธีทำรูปภาพให้ responsive อย่างถูกต้อง:

• 1. ใส่ img tag ใน HTML — ระบุ src และ alt เสมอ: <img src='...' alt='คำอธิบายรูป'>
• 2. เพิ่ม max-width: 100% ให้ img — ป้องกันรูปล้น container ไม่ว่า container จะกว้างหรือแคบแค่ไหน
• 3. เพิ่ม height: auto — ทำให้ความสูงคำนวณอัตโนมัติตามสัดส่วนต้นฉบับ ป้องกันรูปบิด
• 4. เพิ่ม display: block — ป้องกัน gap ด้านล่างรูปที่เกิดจาก inline baseline ของ img
• 5. ถ้าต้องการกล่องขนาดตายตัว — กำหนด height หรือ aspect-ratio บน container แล้วใช้ object-fit: cover บน img

ตัวอย่างที่ 1 — รูปล้น container แล้วแก้ให้ responsive

ตัวอย่างที่พบบ่อยที่สุด: รูปกว้างกว่า container ทำให้เกิด scroll bar แนวนอน — แก้ได้ด้วย max-width: 100%:

ตัวอย่างที่ 2 — รักษาสัดส่วนด้วย object-fit

เมื่อต้องการกล่องรูปขนาดตายตัว object-fit ช่วยให้รูปพอดีกล่องโดยไม่บิดสัดส่วน:

ตัวอย่างที่ 3 — รูปใน card และ hero section

pattern ที่ใช้บ่อยที่สุดในการพัฒนาเว็บจริง — card grid และ hero image แบบ responsive:

จุดที่ผู้เริ่มต้นมักสับสน

• max-width: 100% กับ width: 100% ต่างกัน — width: 100% บังคับกว้างเต็มเสมอ, max-width: 100% กว้างสูงสุดเท่า container แต่รูปเล็กกว่า container ยังคงขนาดต้นฉบับ
• ลืม height: auto แล้วใส่ height ตายตัวคู่กับ max-width — รูปจะยืดความกว้างแต่ความสูงไม่เปลี่ยน ทำให้รูปบิด ต้องใช้ height: auto เสมอ
• object-fit ไม่ทำงานถ้าไม่มีขนาดกล่อง — object-fit ต้องทำงานร่วมกับ width + height หรือ aspect-ratio ถ้า img ไม่มีขนาดกล่องตายตัว object-fit ไม่มีผล
• img มี gap ด้านล่าง — เกิดจาก img เป็น inline element และมี baseline ใส่ display: block แก้ปัญหาได้ทันที

เปรียบเทียบ Fixed กับ Responsive Images

สรุปท้ายบทแบบจำง่าย

responsive images = max-width: 100% + height: auto + display: block สูตรมาตรฐานที่ควรใส่ให้ img ทุกรูปเป็น global style:

• max-width: 100% — รูปไม่ล้น container เด็ดขาด ควรใส่ให้ img ทุกรูป
• height: auto — รูปไม่บิดสัดส่วน ใช้คู่กับ max-width เสมอ
• object-fit: cover — ใช้เมื่อต้องการกล่องรูปขนาดตายตัว เช่น card หรือ thumbnail

Lab 1 — ทำรูปไม่ให้ล้น container

โจทย์: รูปภาพในบทความมีความกว้าง 800px แต่ container แคบกว่า ทำให้ล้น เพิ่ม CSS ให้ .article img: - max-width: 100% - display: block

Lab 2 — รักษาสัดส่วนของรูป

โจทย์: .profile-img มี max-width: 100% แต่ height: 180px ตายตัว ทำให้รูปบิดสัดส่วนเมื่อ container แคบลง แก้ให้รูปรักษาสัดส่วน: - เปลี่ยน height: 180px เป็น height: auto

Lab 3 — แก้ layout ที่ภาพทำให้หน้าเสียสมดุล

โจทย์: .hero-img ในส่วน hero ไม่ได้กำหนด width ทำให้รูปไม่เต็มความกว้าง hero section และดูไม่สมดุล ทำให้ .hero-img เต็มความกว้าง hero section: - เพิ่ม width: 100% - เพิ่ม height: auto - เพิ่ม display: block