一、什麼是object-fit
object-fit是一種CSS屬性，它可以控制一個元素（img，video等）在其容器中的大小和位置。
這個屬性可以讓元素自適應其父容器，不需要軟體或腳本的幫助，可以更加方便地將視覺元素嵌入到網站中。
二、object-fit的值
object-fit屬性有5個值：fill，contain，cover，none和scale-down。
1. fill
img {
object-fit: fill;
}
fill值讓元素填充其父容器，不保留其原始高寬比。
2. contain
img {
object-fit: contain;
}
contain值保持元素的原始高寬比，縮小元素以適應其父容器，並居中對齊。
3. cover
img {
object-fit: cover;
}
cover值保持元素的原始高寬比，裁剪元素以充滿其父容器，並居中對齊。
4. none
img {
object-fit: none;
}
none值會保持元素的原始高寬比並將其放置在元素的父容器中，但對齊方式和尺寸由開發者自行決定。
5. scale-down
img {
object-fit: scale-down;
}
如果元素本身的大小小於容器的大小，則「scale-down」將以元素的原始大小為基準，使用「contain」的規則調整大小。
三、搭配object-position使用
在處理圖像和視頻時，object-position是另一個CSS屬性，它可以控制被定位元素的位置。該屬性可以用來調整元素在其父容器中的位置，而不是默認居中。
object-position使用像素單位描述元素的水平和垂直位置，如下所示：
img {
object-fit: cover;
object-position: top center;
}
這將顯示圖像的頂部中心，而不是默認的居中。
四、使用示例
下面是一個完整的使用示例，演示了如何將一個元素添加到網頁中，並使其在其容器中自適應。
使用object-fit .container {
width: 400px;
height: 400px;
border: 1px solid black;
}
.photo {
width: 100%;
height: 100%;
object-fit: cover;
}原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/289034.html
微信掃一掃 
支付寶掃一掃 