CSS object-fit属性

最新推荐文章于 2025-06-04 10:51:39 发布

原创最新推荐文章于 2025-06-04 10:51:39 发布 · 3.4k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#object-fit #css3

css3 专栏收录该内容

20 篇文章

订阅专栏

本文深入探讨了CSS中object-fit和object-position属性的应用，详细解释了五个object-fit值（fill、contain、cover、none、scale-down）的功能及区别，并通过实例展示了如何使用这些属性来调整图片在容器内的显示方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先了解下object-fit的几个属性：

           object-fit: fill; 
        　　object-fit: contain; 
        　　object-fit: cover; 
        　　object-fit: none; 
        　　object-fit: scale-down;

解释：

fill: 中文解析“填充”。默认值。替换内容拉伸填满整个contentbox,不保证保持原有的比例。

contain: 中文解析“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。

cover: 中文解析“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见（上面讲解的例子就是如此）。

none: 中文解析“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。

scale-down: 中文解析“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。

object-position要比object-fit单纯的多，就是控制图片在盒子中显示位置的。默认值是50% 50%，也就是居中效果，下次要实现尺寸大小不固定图片的垂直居中效果，可以试试object-fit.

与background-position类似，object-position的值类型为<position>类型值。也就是说，CSS3的相对坐标设定样式支持的。

这里就详细说了，自己可以动手试试。

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>object-fit</title>
    <style>
        body,
        html {
            width: 100%;
            height: 100%;
        }

        .contain {
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            flex-wrap: wrap;
            width: 1000px;
            margin: 0 auto;

        }

        .box1,
        .box2,
        .box3,
        .box4,
        .box5,
        .box6 {
            width: 400px;
            height: 220px;
            margin-top: 20px;
            margin-right: 20px;
            border: 1px solid red;
        }

        .box1 img {
            width: 100%;
            height: 100%;
            object-fit: fill;
        }

        .box2 img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .box3 img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .box4 img {
            width: 100%;
            height: 100%;
            object-fit: none;
        }

        .box5 img {
            width: 100%;
            height: 100%;
            object-fit: scale-down;
            /* object-position: 20% 20%; */
        }

        .box6 img {
            width: auto;
            height: auto;
        }
    </style>
</head>

<body>

    <div class="contain">
        <div class="box1">
            <img src="./1.jpg" alt="">
        </div>
        <div class="box2">
            <img src="./1.jpg" alt="">
        </div>
        <div class="box3">
            <img src="./1.jpg" alt="">
        </div>
        <div class="box4">
            <img src="./1.jpg" alt="">
        </div>
        <div class="box5">
            <img src="./1.jpg" alt="">
        </div>
        <div class="box6">
            <img src="./1.jpg" alt="">
        </div>
    </div>
</body>

</html>

最后，注意目前IE应该还不支持object-fit和object-position属性