วิธีทำให้รูปภาพตอบสนอง (Responsive) ใน HTML

การทำให้รูปภาพเป็น Responsive ใน HTML สามารถทำได้ง่ายๆ โดยการกำหนดคุณสมบัติ CSS เพียงสองอย่าง คือ height: auto และ max-width: 100% ซึ่งจะทำให้รูปภาพปรับขนาดตามความกว้างของ container โดยอัตโนมัติ และยังคงสัดส่วนเดิมไว้ได้

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
<head></head>
<body>
  <img src="https://www.tutorialspoint.com/images/video_tutorial_intro.jpg" alt="Video Tutorials" style="height:auto;max-width:100%;">
</body>
</html>

วิธีทดสอบ

ลองปรับขนาดแท็บเบราว์เซอร์ หากรูปภาพปรับขนาดตามไปด้วย แสดงว่ารูปภาพนั้น Responsive แล้ว

คำอธิบายเพิ่มเติม

• height: auto - ทำให้ความสูงปรับอัตโนมัติตามสัดส่วน
• max-width: 100% - จำกัดความกว้างสูงสุดไม่เกิน container
• วิธีนี้ทำงานได้กับทุก browser รุ่นใหม่ ไม่ต้องใช้ JavaScript