一、什么是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/n/289034.html
微信扫一扫 
支付宝扫一扫 