Workshop: HTML Images

1) Image Basic src/alt

รูปภาพใน HTML ใช้แท็ก img โดยต้องมี src และควรมี alt เสมอ

                <img src="images/photo.jpg" alt="ภาพตัวอย่าง">
            

alt สำคัญมาก: ช่วย SEO + ใช้แทนภาพเมื่อโหลดไม่ได้ + ช่วยผู้ใช้ Screen Reader

2) Resize & Aspect Ratio object-fit

ถ้ากำหนดทั้งความกว้างและสูง ให้ใช้ object-fit เพื่อไม่ให้ภาพบิด

                .img-fixed {
                width: 260px;
                height: 60px;
                object-fit: cover; /* ครอปภาพให้พอดีกรอบ */
                }
            

cover = ครอปให้เต็มกรอบ, contain = เห็นภาพครบ (อาจมีขอบว่าง)

3) Object fit contain fill cover

ตัวอย่างการใช้ object-fitแบบต่างๆ

                .obj-fit-image{
                width: 800px;
                height: 200px;
                border: 1px solid black;
                }
                .obj-fit-image.contain { object-fit: contain; }
                .obj-fit-image.fill { object-fit: fill; }
                .obj-fit-image.cover { object-fit: cover; }
            

ภาพต้นฉบับ

ใส่ object-fit: contain ➡️เห็นภาพครบ รักษาสัดส่วน (อาจมีขอบว่าง)

object-fit: fill ➡️ยืดภาพให้เต็มกล่อง ภาพอาจบิด (สัดส่วนเพี้ยน)

object-fit: cover ➡️ครอปภาพให้เต็มกล่อง รักษาสัดส่วน บางส่วนของภาพจะถูกตัดออก

5) Image Gallery grid

แสดงรูปหลายรูปด้วย Grid ให้จัดเรียงสวยและเป็นระเบียบ

                    .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
                    .gallery img { height: 120px; object-fit: cover; }
                

💡 ถ้ารูปขนาดไม่เท่ากัน ใช้ object-fit: cover; จะช่วยให้ดูสม่ำเสมอ

6) Responsive Images max-width:100%

ทำให้ภาพไม่ล้นการ์ดและย่อขยายตามหน้าจอ

                    img{
                    max-width:100;
                    height : auto;
                    }
                

7) Figure + Caption semantic

ใช้แท็ก <figure> และ <figcaption> เพื่ออธิบายภาพ (เหมาะกับบทความ/รายงาน)

                        <figure>
                        <img src="image.jpg" alt="คำอธิบายรูปภาพ">
                        <figcaption>รูปที่ 1: คำอธิบายภาพ</figcaption>
                        </figure>
                

“My Favorite Place / Product / Technology” โดยมีภาพอย่างน้อย 5 ภาพ และต้องมี caption ทุกภาพ (Gallery / Image Link พร้อม Caption)