object-fit : CSS 图片自适应

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

Muchen灬

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

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： HTML/CSS 文章标签： css css3 html html5

本文链接：https://blog.youkuaiyun.com/qq_40976321/article/details/104491757

HTML/CSS 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了CSS中object-fit属性的使用方法，包括fill、contain、cover、none和scale-down等值的应用场景，展示了如何使图片在不同容器中保持原有比例或适应容器尺寸。

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

object-fit : CSS 图片自适应

.fill { object-fit: fill; }

.contain { object-fit: contain; }

.cover { object-fit: cover; }

.none { object-fit: none; }

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

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

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

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

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

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

HTML代码

<div class="nav-banner">
      <img src="../image/banner1.png" alt="">
</div>
<div class="nav-banner nav-banner2">
      <img src="../image/banner1.png" alt="">
</div>
<div class="nav-banner nav-banner3">
      <img src="../image/banner1.png" alt="">
</div>
<div class="nav-banner nav-banner4">
     <img src="../image/banner1.png" alt="">
</div>
<div class="nav-banner nav-banner5">
      <img src="../image/banner1.png" alt="">
</div>

style样式：

  /* object-fit:fill; 中文释义“填充”。默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。 */
    .nav-banner img{
        width: 100%;
        height: 100%;
        object-fit:fill;
    }
    /*object-fit: contain  中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。 */
    .nav-banner2 img{
        width: 100%;
        height: 100%;
        object-fit:contain;
    }

    /* object-fit: cover;  中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。
                           因此，此参数可能会让替换内容（如图片）部分区域不可见。 */
    .nav-banner3 img{
        width: 100%;
        height: 100%;
        object-fit:cover;
    }
    /* object-fit:none; 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。 */
    .nav-banner4 img{
        width: 100%;
        height: 100%;
        object-fit:none;
    }
    /* object-fit:scale-down;中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。 */
    .nav-banner5 img{
        width: 100%;
        height: 100%;
        object-fit:scale-down;
    }

效果展示：