CSS中的object-fit和background-size， object-position和background-position属性。

CSS中的object-fit和background-size， object-position和background-position属性。

一、background-size 属性

• background-size 属性用于调整背景图片的大小。它可以使用以下几个值：

1. cover：将背景图像等比缩放并完全覆盖容器，可能会出现部分图像被裁剪的情况。

.background {
    background-image: url('img.jpg');
    background-size: cover;
}

2. contain：将背景图像等比缩放并尽量完整地显示在容器内

.background {
    background-image: url('img.jpg');
    background-size: contain;
}

3. length：指定背景图像的宽度和高度

.background {
    background-image: url('img.jpg');
    background-size: 50% 75%;
}

二、 object-fit

• object-fit 属性用于调整标签中的图片的大小和适应方式。它可以使用以下几个值：

4. fill：将图片拉伸以充满元素，可能会导致图片失真。

img {
    object-fit: fill;
}

5. contain：将图片等比缩放并尽量完整地显示在元素中。

img {
   object-fit: contain;
}

6. cover：将图片等比缩放并完全覆盖元素，可能会出现部分图像被裁剪的情况。

img {
    object-fit: cover;
}

7. none：不改变图片的大小和适应方式，默认值

img {
    object-fit: none;
}

8. scale-down：根据图片的原始尺寸和容器的大小决定图片的大小和适应方式。

img {
    object-fit: scale-down;
}

三、 object-position和background-position属性。
9. object-position属性常与object-fit一起使用，一般用于img和video标签，它规定了元素内容在容器内显示的位置，默认为居中。该属性同样不被IE15及以前的浏览器支持。

常用属性值：
1.center center

img{
object-position:center, center;
object-position:"50% 50%"
}

10. left top

img{
object-position:left,top;
}

11. left center

img{
object-position:left, center;
}

12. left bottom

   img{
   object-position: left, bottom;
   }

13. right top

img{
object-position: right, top;
}

14. right center

img{
object-position: right, center;
}

15. right bottom

   img{
   object-position: right, bottom;
   }

17. center top

img{
object-position: center, top;
}

18. center bottom

img{
object-position: center, bottom;
}