object-fit: fill|contain|cover|scale-down|none|initial|inherit；

最新推荐文章于 2024-07-16 17:43:33 发布
最新推荐文章于 2024-07-16 17:43:33 发布
阅读量413 收藏
点赞数
分类专栏： 前端css 文章标签： css3 css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40703860/article/details/122193298
版权

object-fit: fill|contain|cover|scale-down|none|initial|inherit;
在这里插入图片描述

进击中的前端小白
关注
专栏目录
CSS实现等比例缩放：object-fit 的使用
qq_53985958的博客
06-20 3759
CSS实现等比例缩放：object-fit 的使用
object-fit和object-position——定义图片和视频元素在容器内如何显示的css属性
以休伯利安的名义
02-07 815
目录object-fitobject-fit: fill;object-fit: contain;object-fit: cover;object-fit: scale-down;object-fit: none;object-fit: initial;object-fit: inherit;object-position 当我们给img标签加上固定的宽和高时，img标签中的图片会默认被拉伸变形，如图： <body> <img src="./demo.jpg" alt=""> &lt
object-fit
肖肖肖丽珠的博客
03-16 1526
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
ill,contain,cover,none,scale-down 区别
最新发布
qq_43987527的博客
07-16 291
scale-down: 保持原有尺寸比例,如果容器尺寸大于图片内容尺寸，保持图片的原有尺寸，不会放大失真；容器尺寸小于图片内容尺寸，用法跟contain一样。cover: 保持原有尺寸比例。宽度和高度中长的那条边跟容器大小一致，短的那条等比缩放。可能会有部分区域不可见。contain：保持原有尺寸比例。长度和高度中短的那条边跟容器大小一致，长的那条等比缩放，可能会有留白。内容拉伸填满整个content box, 不保证保持原有的比例。none: 保持原有尺寸比例。同时保持替换内容原始尺寸大小。
视频 图片撑满容器 object-fit：fill
weixin_44968614的博客
07-13 1703
视频 或者图片 为了保证自己展现的内容不变形 会默认保持自己的长宽比例，但是有时候 需求是满铺 就需要用到 object-fit 属性 语法 object-fit 属性由下列的值中的单独一个关键字来指定。 取值 contain 被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。 cover 被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象.
图片的尺寸 fill,contain,cover,none,scale-down 的区别
weixin_38345306的博客
09-27 7134
fill: 默认值。内容拉伸填满整个content box, 不保证保持原有的比例。 contain: 保持原有尺寸比例。长度和高度中短的那条边跟容器大小一致，长的那条等比缩放，可能会有留白。 cover: 保持原有尺寸比例。宽度和高度中长的那条边跟容器大小一致，短的那条等比缩放。可能会有部分区域不可见。 none: 保持原有尺寸比例。同时保持替换内容原始尺寸大小。 scale-down: 保持原有尺寸比例,如果容器尺寸大于图片内容尺寸，保持图片的原有尺寸，不会放大失真；容器尺寸...
css属性 object-fit 和 object-position
dd1145322563的专栏
07-14 489
object-fit CSS属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。 您可以通过使用object-position属性来切换被替换元素的内容对象在元素框内的对齐方式。 object-fit 属性由下列的值中的单独一个关键字来指定。 取值 contain 被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加“黑边”。 cover 被替换的内容在保持其宽高比的同时填充元...
object-fit img图片显示方式
qq_42828972的博客
06-29 1101
使用object-fit属性使图片不变形 不压缩 原来的图片这样子 932*1500的图片的高被限制了 看起来扁扁的 使用object-fit属性可解决这个问题 在img标签的样式上加上object-fit: contain; 图片即可显示完全 object-fit属性的其他值 object-fit:fill object-fit:contain object-fit:cover object-fit:none object-fit:scale-down object-fit:
项目实践记录
小胖的博客
03-30 1085
Object-fit
pscool的博客
02-02 937
object-fit主要适合于替换元素，比如：、、、、、和等。fill:此值为boject-fit的默认值，替换内容的大小被设置为填充元素的内容框，也就是说，元素的内容扩大到完全填充容器的外形尺寸，即使这打破其内在的宽高比。none：替换元素内容不调整大小以适应内部元素的容器，内容完全忽略设置在元素上的任何高度和权重，并且仍在元素尺寸内显示。object-fit取值说明。
object-fit 属性详解
qq_43223007的博客
02-09 1240
object-fit 属性详解
object-fit属性-详解
slice_93的博客
10-14 3816
object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。 ** 二、object-fit属性值： ** 1.fill(与不使用模样一样) 默认值，不保证保持原有的比例，内容全部显示铺满容器。 2.contain 个人理解：保持原有尺寸比例，使图片的宽度完整的显示，高度自动缩放。 3.cover 个人理解：保持原有尺寸比例。高度铺满容器，宽度等比缩放，超出部分被剪掉。 4.none 个人理解：图片原有宽高不变，超出部分被剪掉，保留下来的内容使图片的正中央。 5.scale-do
html设置图片的拖动改变大小,css resize属性将div变成可以拖动修改大小配合object-fit实现图片大小适应的效果...
weixin_42298802的博客
06-04 785
我们需要的效果, 小猫的照片会自动的适应, 并且不会有比例上的拉伸 resize有四个值: none|both|vertical|horizontal; 表示什么方向上可以拉伸object-fit：fill,完全拉伸填满被替换的内容大小可以填充元素的内容框。 整个对象将完全填充此框。 如果对象的高宽比不匹配其框的宽高比，那么该对象将被拉伸以适应。 object-fit:contain, 等比例拉伸...
css3 object-fit的作用
leiting084的专栏
02-10 2835
在使用h5的video组件的时候，部分视频和容器的尺寸不一致，会发生留出黑边的情况。在不产生大的画面变形的情况下，会使用css3样式object-ft:fill;来将视频填充满容器。那么object-fit到底有什么作用呢？通过查找资料发现object-fit有如下的属性： 1、object-fit:fill; 拉伸填满整个容器 2、object-fit:contain; 宽度铺满整个容器，高度等比缩放，超出则裁剪 3、object-fit:cover; 高度铺满，宽度等比缩放，超出则裁剪 4
CSS之object-fit详解
lanzengquan的博客
10-25 2298
在上面的代码中，我们创建了一个包含图片的容器，使用object-fit: cover属性将图片进行缩放，使其能够完全覆盖容器，并且使用overflow: hidden属性将超出容器范围的部分隐藏起来，以确保图片不会超出容器。当一个图片或视频被包含在一个容器中时，它可能会与容器的宽高比不匹配，此时就需要通过object-fit属性来指定如何调整图片或视频的大小和位置。scale-down：在保持宽高比的情况下，缩小图片或视频，使其不超过容器的大小，如果缩小后的大小小于原始大小，则按原始大小显示。
CSS3 object-fit 和 object-position
weixin_33737134的博客
11-21 195
最近一直忙于将JavaScript学习的笔记整理成电子书，也没什么空闲时间写新的文章。趁着今天有点空闲，决定再来折腾一下CSS3中的两个属性：object-fit和object-position。 这两个奇葩的属性是搞毛的呢？其实它们是为了处理替换元素（replaced elements）的自适应问题，简单的说，就是处理替换元素的变形（这里指长宽比例变形）问题。 等等，好像多了一个名词，啥叫替换元...
让图片适应标签的CSS object-fit属性
qq_39410252的博客
03-18 2504
在实际的项目运行过程中，可能出现运营人员上传的文件与预期的图片尺寸不同的情况，为了解决这一问题可以使用 object-fit 属性，对嵌入的图像（以及其他替代元素，如视频）做相应的变化，更加精确地控制图像的展示效果，从而满足多样化的设计需求。
img标签关于填充方式的属性
热门推荐
小于零等于二的博客
02-15 1万+
img属性object-fit 属性值：object-fit: fill / contain / cover / none / scale-down; fill: 默认值。内容拉伸填满整个content box, 不保证保持原有的比例。 contain: 保持原有尺寸比例。长度和高度中短的那条边跟容器大小一致，长的那条等比缩放，可能会有留白。 cover: 保持原有尺寸比例。宽度和高度中长的那条边跟容器大小一致，短的那条等比缩放。可能会有部分区域不可见。 none: 保持原有尺寸比例。同时保
object-fit: cover
07-12
`object-fit: cover;` 是一个 CSS 属性，用于指定将图片或视频媒体元素填充到其容器中，并保持其宽高比例不变，同时裁剪超出容器的部分。具体来说，`object-fit` 属性有以下几个可能的值： - `fill`: 将对象拉伸以适应容器。 - `contain`: 将对象缩放以适应容器，但不裁剪任何部分。 - `cover`: 将对象缩放以填充容器，同时保留其宽高比例，并裁剪超出容器的部分。 - `none`: 不对对象进行缩放，同时保留其原始尺寸。 - `scale-down`: 如果对象比容器大，则将其缩小以适应容器，否则按原始尺寸显示。 所以，`object-fit: cover;` 表示将对象缩放以填充容器，同时保留其宽高比例，并裁剪超出容器的部分。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值