CSS属性object-fit: cover的作用和用法

属性用法 objectfit

CSS属性object-fit: cover可以让图片更好的适应其容器，而不会失去其宽高比。它是一个CSS3属性，用于替换原来的CSS2属性background-size，可以用于img元素和video元素。

使用方法：

1. 在CSS代码中定义图片的宽高，如：

img {
    width: 500px;
    height: 300px;
}

2. 在CSS代码中添加object-fit: cover属性，如：

img {
    width: 500px;
    height: 300px;
    object-fit: cover;
}

3. 在HTML代码中添加img元素，如：

<img src="example.jpg">

object-fit: cover属性会使图片填充满容器，但是不会失去其宽高比，从而使图片更好的适应其容器。

object-fit: cover属性还可以和object-position属性一起使用，以控制图片在容器中的位置，如：

img {
    width: 500px;
    height: 300px;
    object-fit: cover;
    object-position: left top;
}

<img src="example.jpg">

object-position属性可以设置图片在容器中的位置，其值可以是left top、right top、left bottom、right bottom等，也可以是百分比值，如：left 50%、right 50%、top 50%、bottom 50%。

CSS属性object-fit: cover可以让图片更好的适应其容器，而不会失去其宽高比，它可以和object-position属性一起使用，以控制图片在容器中的位置。

展开阅读全文

上一篇：使用Vue实现图片上传功能下一篇：CSS3中的事件穿透现象及解决方法