object-fit属性

最新推荐文章于 2023-11-09 21:34:14 发布

前端小白的逆袭

最新推荐文章于 2023-11-09 21:34:14 发布

阅读量1.9k

点赞数 14

分类专栏： Web前端文章标签：前端

本文链接：https://blog.csdn.net/Kindergarten_Sir/article/details/110469875

版权

Web前端专栏收录该内容

140 篇文章 8 订阅

订阅专栏

object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。

应用示例：点这里【object-fit的使用】

一、测试基本配置（后附有代码）

1.选择一张图片（1024*582）大于容器（200*400）宽高，一张图片（150*150）小于容器（200*400）宽高。
2.容器宽高css分别为200px、400px，图片宽高css均设置为100%
在这里插入图片描述

二、属性值：

1.fill(与不使用模样一样)
默认值，不保证保持原有的比例，内容全部显示铺满容器。
在这里插入图片描述

2.contain
个人理解：保持原有尺寸比例，使图片的宽度完整的显示，高度自动缩放。
在这里插入图片描述

3.cover
个人理解：保持原有尺寸比例。高度铺满容器，宽度等比缩放，超出部分被剪掉。
在这里插入图片描述
4.none
个人理解：图片原有宽高不变，超出部分被剪掉，保留下来的内容使图片的正中央。

5.scale-down
个人理解：保持原有比例。当图片实际宽高小于所设置的图片宽高时，显示效果与none一致；否则，显示效果与contain一致。
在这里插入图片描述

三、原图

在这里插入图片描述

四、代码

    <style>
        div {width: 200px;height: 400px;border: 2px solid #f0f;}
        section {display: flex;justify-content: space-around;}
        img {width: 100%;height: 100%;}
        .fill {object-fit: fill;}
        .contain {object-fit: contain;}
        .cover {object-fit: cover;}
        .scale-down {object-fit: scale-down;}
        .none {object-fit: none;}
    </style>
</head>
<body>
    <h1>object-fit 属性。（容器宽高分别为200px、400px,带边框）选择了一张大于容器宽度，一张小于容器宽度的图，图片宽高都设置为100%</h1>
    <h2>不使用 object-fit图片的宽带高</h2>
    <section>
        <div><img src="picture.jpg" alt="picture" /></div>
        <div><img src="zhenji.png" alt="picture" /></div>
    </section>
    <h2>object-fit: fill (默认);默认，不保证保持原有的比例，内容拉伸填充整个内容容器。</h2>
    <section>
        <div><img class="fill" src="picture.jpg" alt="picture" /></div>
        <div><img class="fill" src="zhenji.png" alt="picture" /></div>
    </section>
    <h2>object-fit: contain;保持原有尺寸比例。内容被缩放。</h2>
    <section>
        <div><img class="contain" src="picture.jpg" alt="picture" /></div>
        <div><img class="contain" src="zhenji.png" alt="picture" /></div>
    </section>
    <h2>object-fit: cover;保持原有尺寸比例。但部分内容可能被剪切。</h2>
    <section>
        <div><img class="cover" src="picture.jpg" alt="picture" /></div>
        <div><img class="cover" src="zhenji.png" alt="picture" /></div>
    </section>
    <h2>object-fit: scale-down;保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。</h2>
    <section>
        <div><img class="scale-down" src="picture.jpg" alt="picture" /></div>
        <div><img class="scale-down" src="zhenji.png" alt="picture" /></div>
    </section>
    <h2>object-fit: none;保留原有元素内容的长度和宽度，也就是说内容不会被重置。</h2>
    <section>
        <div><img class="none" src="picture.jpg" alt="picture" /></div>
        <div><img class="none" src="zhenji.png" alt="picture" /></div>
    </section>
</body>

应用示例：点这里【object-fit的使用】
如果对你有帮助，可以👍关注，我们一起学前端。😘

前端小白的逆袭

关注

14
点赞
踩
52

收藏

觉得还不错? 一键收藏
1
评论
object-fit属性

object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。属性值：1.fill2.contain3.cover4.scale-down5.none如果对你有帮助，可以????关注，我们一起学前端。????
复制链接

扫一扫