css—— object-fit 属性

dangfulin

已于 2025-06-15 22:37:20 修改

阅读量1.2k

点赞数 13

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css 前端

于 2025-03-25 22:36:03 首次发布

本文链接：https://blog.csdn.net/dangfulin/article/details/146513909

CSS 专栏收录该内容

7 篇文章

订阅专栏

一，属性值

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

在这里插入图片描述

原本的图片：
在这里插入图片描述

属性值效果：

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }

        .box {
            width: 200px;
            height: 200px;
            border: 2px solid #333;
            margin-bottom: 30px;
        }

        img {
            width: 100%;
            height: 100%;
        }

        .fill {
            object-fit: fill;
        }

        .contain {
            object-fit: contain;
        }

        .cover {
            object-fit: cover;
        }

        .none {
            object-fit: none;
        }

        .scale-down {
            object-fit: scale-down;
        }

        .title {
            font-weight: bold;
            margin-top: 5px;
        }
    </style>
</head>
<body>

<div class="container">
    <div>
        <div class="box">
            <img src="./imgs/4.jpg" class="fill" alt="fill example">
        </div>
        <div class="title">object-fit: fill</div>
        <ul>
            <li>不保持原始宽高比</li>
            <li>完全拉伸/压缩以填满容器</li>
        </ul>
    </div>

    <div>
        <div class="box">
            <img src="./imgs/4.jpg" class="contain" alt="contain example">
        </div>
        <div class="title">object-fit: contain</div>
        <ul>
            <li>保持原始宽高比</li>
            <li>完全填充容器，可能会有空白</li>
            <li>如果容器与元素宽高比不同，会出现空白</li>
        </ul>
    </div>

    <div>
        <div class="box">
            <img src="./imgs/4.jpg" class="cover" alt="cover example">
        </div>
        <div class="title">object-fit: cover</div>
        <ul>
            <li>保持原始宽高比</li>
            <li>完全填充容器，多余部分会被裁剪</li>
            <li>通常推荐用于背景图或需要铺满容器的场景</li>
        </ul>
    </div>

    <div>
        <div class="box">
            <img src="./imgs/4.jpg" class="none" alt="none example">
        </div>
        <div class="title">object-fit: none</div>
        <ul>
            <li>保持原始宽高比</li>
            <li>不进行任何缩放</li>
            <li>超出部分会溢出</li>
        </ul>
    </div>

    <div>
        <div class="box">
            <img src="./imgs/4.jpg" class="scale-down" alt="scale-down example">
        </div>
        <div class="title">object-fit: scale-down</div>
        <ul>
            <li>保持原始宽高比</li>
            <li>如果图片比容器小，则表现与 contain 一样</li>
            <li>如果图片比容器大，则表现与 none 一样</li>
        </ul>
    </div>
</div>

</body>
</html>

二，实际应用示例

1，头像裁剪

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            object-fit: cover; /* 确保头像始终填满圆形区域 */
            object-position: center; /* 居中对齐 */
        }
    </style>
</head>
<body>
<div>
    <h3>原图300x200，显示区域100x100，object-fit: cover</h3>
    <img src="https://picsum.photos/300/200" class="avatar" alt="fill example">
</div>
</body>
</html>

2，响应式背景图片

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>瀑布流布局</title>
    <style>
        .hero-section {
            width: 100%;
            height: 500px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-image: url('https://picsum.photos/200/300');
            background-size: cover;
            background-position: center;
        }

        .responsive-background {
            max-width: 100%;
            height: 500px;
            object-fit: cover;
            object-position: center;
        }
    </style>
</head>
<body>

<div class="hero-section">
    <img class="responsive-background" src="https://picsum.photos/200/300" alt="背景图">
</div>
</body>
</html>

3，照片墙

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>瀑布流布局</title>
    <style>
        .product-carousel {
            display: flex;
            overflow-x: auto;
        }

        .product-image {
            width: 300px;
            height: 400px;
            margin-right: 10px;
            object-fit: contain; /* 完整显示产品 */
            background-color: #f0f0f0; /* 背景色 */
            padding: 20px;
        }
    </style>
</head>
<body>
<div class="product-carousel">
    <img class="product-image" src="https://picsum.photos/400/600">
    <img class="product-image" src="https://picsum.photos/300/300">
    <img class="product-image" src="https://picsum.photos/200/300">
    <img class="product-image" src="https://picsum.photos/300/200">
</div>
</body>
</html>