สร้างรูปโปรไฟล์/อวตาร์เป็นวงกลมสมบูรณ์ ใช้ border-radius: 50% พร้อม Border และ Vertical Align
ตัวอย่างโค้ด
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .avatarImage { vertical-align: middle; width: 250px; height: 250px; border-radius: 50%; border:3px solid black; margin: 10px; } </style> </head> <body> <h1>Avatar Images Example</h1> <img src="https://images.pexels.com/photos/2128807/pexels-photo-2128807.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="avatarImage"> <img src="https://images.pexels.com/photos/1222271/pexels-photo-1222271.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="avatarImage"> </body> </html>
จุดสำคัญ
- border-radius: 50% - ทำให้สี่เหลี่ยมจัตุรัสกลายเป็นวงกลม
- width = height - ต้องเป็นสี่เหลี่ยมจัตุรัส (250x250) ไม่งั้นจะได้ไข่
- object-fit: cover - แนะนำเพิ่ม เพื่อครอบพื้นที่ไม่บีดบังถ้ารูปต้นฉบับไม่ใช่สี่เหลี่ยมจัตุรัส
- vertical-align: middle - จัดกึ่งกลางแนวตั้งกับข้อความข้างๆ
- border: 3px solid black - ขอบสีดำหนา 3px
ขนาดมาตรฐาน Avatar
- Small: 32-40px (Comment, List)
- Medium: 80-120px (Profile Card)
- Large: 200-300px (Profile Page)
ผลลัพธ์
รูปวงกลม 2 รูป ขนาด 250px ขอบดำหนา 3px วางติดกัน
