วิธีปรับรูปภาพให้ย่อตามขนาดของหน้าจอ ด้วย CSS

สอนวิธีปรับรูปภาพให้ย่อตามขนาดของหน้าจอ ด้วยภาษา CSS บทความนี้สอนการเขียนคำสั่ง CSS เพื่อทำให้รูปภาพทั้งหมด หรือเฉพาะบางรูปที่ต้องการให้ย่อ หรือขยายตามขนาดหน้าจอ สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่างที่ 1 วิธีปรับรูปภาพให้ย่อตามขนาดของหน้าจอ แบบใช้กับรูปภาพทั้งหมด

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

กรณีต้องการให้ทุกรูปภาพบนเว็บไซต์มีการย่อตามขนาดของหน้าจอ แนะนำให้อ้างถึงแท็ก img และกำหนดค่า width 100% และ height auto

ตัวอย่างที่ 2 วิธีปรับรูปภาพให้ย่อตามขนาดของหน้าจอ แบบกำหนดให้กับบางรูปภาพ

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

<img src="https://www.devdit.com/favicon-16x16.png" class="img_rep">

กรณีต้องการให้เฉพาะบางรูปภาพบนเว็บไซต์มีการย่อตามขนาดของหน้าจอ จากตัวอย่างสร้าง class ชื่อ img_rep กำหนดค่า width 100%, height auto และนำไปใช้เฉพาะกับแท็ก img ที่ต้องการให้ย่อตามขนาดของหน้าจอ