掌握【object-fit】&【object-position】，让图片完美填充盒子！

在逃小屁王

已于 2024-12-20 10:10:19 修改

阅读量757

点赞数 13

文章标签：前端 javascript html5 css css3

于 2024-11-10 08:00:00 首次发布

本文链接：https://blog.csdn.net/weixin_56473118/article/details/143610856

版权

【object-fit】&【object-position】

配合object-position设置图像位置

demo代码

【object-fit】&【object-position】

导入

工作中你可能会遇到这样的场景，类似图一某音乐的推荐歌单，该区域有着多个固定大小的盒子，盒子中展示的图像（由 img 标记）每天都会实时更新。

object-fit 和 object-position 用来定位调整图片以适配固定盒子，可以帮助你实现：

无论上传多大尺寸的图片，都可以去适配盒子，展现你想要展现的图片内容。

图一：

object-fit概念

object-fit CSS 属性指定可替换元素（例如：<img> 或 <video>）的内容应该如何适应到其使用高度和宽度确定的框

尝试一下

接下来会主要讲解cover和contain两个关键字，关于二者会产生的不同效果，你可以点击在线运行代码，

观察一下二者的区别，详解看下文：

cover和contain的区别

contain

被替换内容将被缩放来填充盒子，但会保持其本身的纵横比，一定情况下会导致出现黑边（如示例所示）的情况

cover

被替换的内容在保持其宽高比的同时，**裁剪**图片使其**完全填充**整个盒子&

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

在逃小屁王

关注关注

13
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

css零到一高级教程017：CSS object-fit 属性

kerryqpw的博客

03-28

820

CSSobject-fit属性用于规定应如何调整 <img> 或 <video> 的大小来适应其容器。浏览器支持表格中的数字注明了完全支持该属性的首个浏览器版本。 CSS object-fit 属性 CSS object-fit 属性用于指定应如何调整 <img> 或 <video> 的大小以适合其容器。这个属性告诉内容以不同的方式填充容器。比如“保留长宽比”或者“展开并占用尽可能多的空间”。请看下面来自上海鲜花港的郁金香图片，它...

object-fit和object-position实现图片原比例裁剪不拉伸适应

m0_70274796的博客

05-03

438

fill - 填充，内容拉伸充满整个屏幕 contain - 包含，保持原有比例，保证容器内放的下但是会有留白 cover - 覆盖，保持原有比例，保证内容一定大于容器尺寸，宽高至少有一个和窗口保持一致，部分区域可能不可见 none - 无，保持原有比例同时保持内容原始尺寸 scale-down - 降低，依次设置none或contain，最终呈现尺寸较小的那个 ![在这里插入图片描述](https://img-blog.csdnimg.cn/2021070617223278.png?x-oss-

参与评论您还未登录，请先登录后发表或查看评论

object-fit css3

笔记库

08-26

434

object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。 object-fit: fill; 被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。 object-fit: contain; 被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。整个对象在填充盒子的同时保留其长...

css—— object-fit 属性

最新发布

dangfulin的博客

03-25

957

原本的图片：.containerdisplay;flex-wrap;gap;.boxwidth;height;border;;imgwidth;height;object-fit;.title;margin-top;

Object-fit

pscool的博客

02-02

998

object-fit主要适合于替换元素，比如：、、、、、和等。fill:此值为boject-fit的默认值，替换内容的大小被设置为填充元素的内容框，也就是说，元素的内容扩大到完全填充容器的外形尺寸，即使这打破其内在的宽高比。none：替换元素内容不调整大小以适应内部元素的容器，内容完全忽略设置在元素上的任何高度和权重，并且仍在元素尺寸内显示。object-fit取值说明。

object-fit属性

前端小白的逆袭

12-02

2014

object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。属性值： 1.fill 2.contain 3.cover 4.scale-down 5.none 如果对你有帮助，可以????关注，我们一起学前端。????

object-fit

肖肖肖丽珠的博客

03-16

1550

The object-fit CSS property specifies how the contents of a replaced element should be fitted to the box established by its used height and width. object-fit是个css的属性指定的替换的内容元素如何放在建立的的高和宽的框里。 obj

有意思的object-fit

前端三疯的博客

07-28

479

在实际项目过程中，我们肯定会使用图片元素，那么图片是以何种方式填充容器的我们是否想过？默认情况下，我们设置一张图片的宽高，图片会根据宽高拉伸图片，会导致图片变形的情况，有时候会有点丑，针对这种情况我们可以使用一个css 属性 object-fit使用各种方式填充容器，如“保持原图片长宽比缩放“，”全部拉伸填充“… object-fit有以下几个属性： fill: 中文释义“填充”。默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。 contain: 中文释义“包含”。保持原有

浅谈CSS中的 object-fit 与 object-position的使用

09-27

在CSS布局中，`object-fit`和`object-position`是两个非常重要的属性，它们主要用于处理替换元素（如图片、视频）在容器内的适应方式和位置调整。这两个属性可以帮助开发者更好地控制元素的显示效果，特别是在响应式...

CSS技巧：利用object-fit与object-position保持图片比例

掌握 `object-fit` 和 `object-position` 的使用对于优化网页设计和提高用户体验至关重要。它们提供了对内联和替换元素尺寸调整和定位的强大控制，是现代CSS布局中的重要工具。通过灵活运用这两个属性，开发者可以...

css object-fit, object-position img 标签适应宽高

352328759的博客

10-27

447

在弹性布局泛滥成灾的今天, "未知比例图片, 适应未知比例盒子"的需求已经屡见不鲜常用的方法常用的方法是用 css 的背景图 div { width: 500px; height: 600px; background-image: url(cat.jpg); background-size: cover; background-position: 50% 50%; } background-size: cover; 让图片大小自适应 background-position: 50% 5

img标签的object-fit属性

weixin_44668640的博客

05-20

8594

img标签的object-fit属性在项目中我也是遇到了这么一个问题，想着img图片怎么让他以最短边和中心点去放大撑满父元素标签，后来想起来有那么一个属性，但是记不住是什么属性了，就一直百度，也找到了一些别的方法，但是对于我来说没什么用，后来我有找了好久终于找到了这个属性object-fit，太难了这个过程。接下来我把我找的第一个方法说一下： max-width: 100%; max-height: 100%; position: relative; top: 50%; left: 50%; transf

object-fit属性(可以用于img和video元素)，以控制它们的内容如何适应其容器

码海扬帆：前端探索之旅的博客

03-02

1308

object-fit 是一个CSS属性，用于指定替换元素（如img或video）的内容如何填充其容器。object-fit: cover是该属性的一个值，它保证内容的宽高比保持不变，同时尽可能大地填充其容器，可能会裁剪掉一些内容以适应。

img 标签的 object-fit 属性

神膘护体小月半的博客

10-28

1517

【代码】img 标签的 object-fit 属性。

HTML img和video object-fit 属性

成长的烧年

02-12

3749

Css中object-fit主要是应用到img标签和Video标签的，来控制显示缩放效果的。首先我们存在一张图片，原始图片的尺寸是 1080px x 600px, 展示效果如下：如果我们的css样式中的img大小设定并不能满足图片的原始大小，比如我们的img样式如下：imgwidth;height;

img元素的object-fit属性

weixin_39228870的博客

01-04

2362