CSS ปรับขนาดรูปตามหน้าจอ ด้วย Responsive Design

สอนเขียนโค้ดภาษา CSS ปรับขนาดรูปตามหน้าจอ ด้วย Responsive Design โดยการกำหนดค่า width และค่า height ให้รองรับการเปลี่ยนแปลงตามขนาดของอุปกรณ์ที่ใช้งาน สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง CSS ปรับขนาดรูปตามหน้าจอ ด้วย Responsive Design

<style>
    .img_rsponsive {
        width: 100%;
        height: auto;
    }
</style>

<img src="https://www.devdit.com/image.jpg" class="img_rsponsive">

โค้ดด้านบนสร้าง class ใน CSS ชื่อ img_rsponsive โดยกำหนดค่า width หรือความกว้างเท่ากับ 100% หมายความว่าให้ขยายเต็มหน้าจอตลอด และกำหนดค่า height หรือความสูงเท่ากับ auto หมายความว่าค่าความสูงจะถูกปรับเปลี่ยนแบบอัตโนมัติตามค่าความกว้างของการแสดงผลรูปภาพ