CSS object-fit属性

本文深入探讨了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属性 

### CSS `object-fit` 属性使用指南 #### 1. 定义与功能 `object-fit` 是一个 CSS 属性,用于定义替换元素(如 `<img>`、`<video>` 或 `<object>`)的内容如何适应其容器框的尺寸[^3]。此属性通过调整内容的比例和位置来实现最佳适配效果。 --- #### 2. 可选值及其含义 以下是 `object-fit` 的主要取值以及每种取值的行为描述: - **fill**: 默认行为,内容会被拉伸以完全填充容器的高度和宽度,可能导致比例失真[^3]。 - **contain**: 内容保持原始宽高比并缩放到适合容器的最大尺寸,可能在容器内留下空白区域[^3]。 - **cover**: 内容同样保持原始宽高比,但会放大到刚好覆盖整个容器,部分溢出内容可能会被裁剪掉[^3]。 - **none**: 内容不进行任何缩放操作,保留原生尺寸,即使超出容器边界也不会改变[^3]。 - **scale-down**: 自动选择 `none` 或 `contain` 中较小的一种作为最终表现形式。当容器小于内容时表现为 `contain`;反之则为 `none`[^5]。 --- #### 3. 示例代码 以下是一些常见的应用场景及其实现方式: ##### (1) 图片居中裁切展示 ```html <div style="width: 200px; height: 200px; border: 1px solid black;"> <img src="example.jpg" alt="Example Image" style="width: 100%; height: 100%; object-fit: cover;" /> </div> ``` ##### (2) 视频全屏播放模式 ```html <video controls style="width: 100%; height: auto; object-fit: contain;"> <source src="movie.mp4" type="video/mp4"> </video> ``` ##### (3) 小图标无缩放示例 ```html <img src="icon.png" alt="Icon Example" style="width: 50px; height: 50px; object-fit: none;" /> ``` --- #### 4. 浏览器兼容性 尽管现代浏览器普遍支持 `object-fit` 属性,但在某些旧版浏览器中可能存在兼容性问题。具体如下表所示: | 浏览器 | 版本支持 | |--------------|----------| | Chrome | ≥31 | | Firefox | ≥36 | | Safari | ≥7.1 | | Edge | ≥12 | | Internet Explorer | 不支持 | 对于 IE 用户或其他低版本环境,可以通过 JavaScript 库(如 [picturefill](https://github.com/scottjehl/picturefill))提供回退方案[^4]。 --- #### 5. 响应式设计中的重要角色 由于移动设备屏幕尺寸多样化,在响应式网页开发过程中合理运用 `object-fit` 能够有效解决媒体资源自适应难题。例如,利用该属性可以让图片或视频始终保持理想比例而不破坏整体布局结构[^3]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值