กำหนดรูปภาพให้พอดีปก แถม Animation ด้วย CSS

ปรับปรุงล่าสุด 27 ก.ค. 2566, 17:30 37 ครั้ง
เรียบเรียงโดย กฤติเดช ฉายจรุง

กำหนดวัตถุให้มีลักษณะ พอดีกับปก

และเพื่อความดูดีมีสไตส์ ประยุกต์ให้มี Animation เพื่อให้เห็นส่วนที่ขาดหาย

fill- นี่เป็นค่าเริ่มต้น รูปภาพถูกปรับขนาดให้เต็มมิติที่กำหนด หากจำเป็น ภาพจะถูกยืดหรือบีบให้พอดี
contain- รูปภาพจะรักษาอัตราส่วนไว้ แต่ปรับขนาดให้พอดีกับขนาดที่กำหนด
cover- รูปภาพจะรักษาอัตราส่วนและเติมมิติที่กำหนด ภาพจะถูกตัดให้พอดี
none- รูปภาพไม่ได้ปรับขนาด
scale-down- รูปภาพถูกลดขนาดลงเป็นเวอร์ชันที่เล็กที่สุดของnoneหรือ contain

.sd {

width: 90%;

height: 300px;

object-fit: cover;

object-position: 0% 0%;

animation: mymove 7s infinite;

}

@keyframes mymove {

0% {

object-position: 0% 0%;

}

20% {

object-position: 20% 0%;

}

45% {

object-position: 65% 65%;

}

70% {

object-position: 100% 100%;

}

100% {

object-position: 0% 0%;

}