Contents
จะปรับขนาดรูปภาพใน HTML ได้อย่างไร?
object-fit CSS property
คุณสามารถใช้คุณสมบัติ CSS object-fit บนอิลิเมนต์ <img> เพื่อระบุว่าภาพควรจะถูกปรับขนาดและตัดต่ออย่างไรเพื่อให้พอดีกับคอนเทนเนอร์ได้ ก่อนที่คุณจะใช้คุณสมบัตินี้ คุณต้องใช้ภาพพื้นหลัง (background image) เพื่อกรณีที่ไม่มี object-fit ใน CSS.
ร่วมกับ inherit, initial, และ unset, มีค่าเพิ่มเติมอีก 5 ค่าสำหรับ object-fit:
contain: ค่านี้จะรักษาอัตราส่วนของภาพเหมือนเดิม แต่จะปรับขนาดภาพเพื่อให้มันเต็มรอบแสดงครบทั้งภาพ ด้านที่ยาวที่สุดของรูปหรือความกว้างจะพอดีกับมิติที่กำหนด โดยไม่สนใจขนาดของกล่องครอบ.cover: ค่านี้จะรักษาอัตราส่วนของภาพเดิม แต่จะปรับขนาดภาพเพื่อให้ครอบคลุมทั้งกล่องครอบ แม้จะต้องทำการย่อหรือตัดแบบภาพ ให้พอดี.fill: ค่าเริ่มต้น (default) คือภาพจะเต็มครอบพื้นที่ที่กำหนดไว้ แม้ว่าจะทำให้สัดส่วนของภาพเสียหาย.none: ค่านี้จะไม่ปรับขนาดภาพเลย และภาพจะเต็มรอบพื้นที่ที่กำหนดไว้.scale-down: ค่านี้จะเลือกค่าที่เล็กที่สุดระหว่างcontainและnone.
ตัวอย่าง HTML ที่ใช้ object-fit เป็นดังนี้
object-fit:contains
<img src="https://ik.imagekit.io/ikmedia/backlit.jpg"
style="object-fit:contain;
width:200px;
height:300px;
border: solid 1px #CCC"/>
object-fit:cover
<img src="https://ik.imagekit.io/ikmedia/backlit.jpg"
style="object-fit:cover;
width:200px;
height:300px;
border: solid 1px #CCC"/>
object-fit:fill
<img src="https://ik.imagekit.io/ikmedia/backlit.jpg"
style="object-fit:fill;
width:200px;
height:300px;
border: solid 1px #CCC"/>
object-fit:none
<img src="https://ik.imagekit.io/ikmedia/backlit.jpg"
style="object-fit:none;
width:200px;
height:300px;
border: solid 1px #CCC"/>
object-fit:scale-down
<img src="https://ik.imagekit.io/ikmedia/backlit.jpg"
style="object-fit:scale-down;
width:200px;
height:300px;
border: solid 1px #CCC"/>
object-fit:cover and object-position
<img src="https://ik.imagekit.io/ikmedia/backlit.jpg"
style="object-fit:cover;
object-position: right;
width:200px;
height:300px;
border: solid 1px #CCC"/>
ที่มา:link
