มีหลายวิธี crop รูปภาพใน CSS วิธีที่ง่ายและมีประสิทธิภาพที่สุดคือ 3 วิธีนี้:
1. ใช้ object-fit
object-fit: cover crop รูปภาพง่ายๆ พร้อมรักษาอัตราส่วน (aspect ratio)
ใช้ร่วมกับ object-position ลองตั้ง object-fit: none และ object-position: 50% 50% จะจัดกึ่งกลางคอนเทนเนอร์ ตัวเลขแรก = ระยะจากซ้าย ตัวที่สอง = ระยะจากบน
2. ใช้ background-image
ตั้งค่า <div> ให้มี background-image: url(...) และ background-size: cover เพื่อ crop รักษาอัตราส่วน background-position เริ่มต้นคือ top left
ข้อจำกัด: accessibility — background-image อาจไม่ถูกอ่านโดย screen reader หากรูปสำคัญ ควรอธิบายเนื้อหารูปในหน้า หรือเลือกวิธีอื่น
3. ใช้ width, height, margin และ overflow
บนคอนเทนเนอร์ของ <img> (มักเป็น <div>) ตั้ง position: relative และ overflow: hidden — relative สร้างขอบเขต overflow ซ่อนส่วนที่ล้น
ตัวอย่างโค้ดครบถ้วน
<style> div > div { max-width: 500px; width: 100%; position: relative; overflow: hidden; } img { width: 100%; } div.crop-top img { margin: -20% auto 0; } div.crop-bottom img { margin: 0 auto -20%; } div.crop-vertically img { margin: -20% auto -20%; } div.crop-right img { width: 120%; margin: 0 -20% 0 0; } div.crop-left img { width: 120%; margin: 0 0 0 -20%; } div.crop-horizontally img { width: 180%; margin: 0 -20% 0; height: 500px; } div.crop-square img { width: 100%; } </style>
ดู class name ใน HTML และ CSS ที่ตรงกัน เพื่อเข้าใจว่า margin ถูกตั้งอย่างไรเพื่อแสดงส่วนของภาพที่ต้องการ
สรุป
3 วิธีหลัก crop รูปภาพ CSS: object-fit (ทันสมัย/ง่ายที่สุด), background-image (แต่มีปัญหา accessibility), และ overflow: hidden กับ margin (คลาสสิก/ควบคุมได้ละเอียด)
