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

最新推荐文章于 2024-08-08 17:29:49 发布
最新推荐文章于 2024-08-08 17:29:49 发布
阅读量381 收藏 1
点赞数
分类专栏： Web前端 文章标签： 经验分享
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_70274796/article/details/124551987
版权
本文介绍了如何利用CSS的object-fit属性（fill、contain、cover、none、scale-down）和object-position属性，来实现图片在不同场景下的原比例裁剪和适应。重点讲述了在需要保持原有比例裁剪图片并调整裁剪位置时，如何使用object-fit:cover和object-position进行精确控制，以达到理想的展示效果。
摘要由CSDN通过智能技术生成

fill - 填充，内容拉伸充满整个屏幕

object-fit：fill

contain - 包含，保持原有比例，保证容器内放的下但是会有留白

在这里插入图片描述

cover - 覆盖，保持原有比例，保证内容一定大于容器尺寸，宽高至少有一个和窗口保持一致，部分区域可能不可见

在这里插入图片描述

none - 无，保持原有比例同时保持内容原始尺寸

在这里插入图片描述

在这里插入图片描述

scale-down - 降低，依次设置none或contain，最终呈现尺寸较小的那个

![在这里插入图片描述](https://img-blog.csdnimg.cn/2021070617223278.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,

最低0.47元/天 解锁文章
m0_70274796
关注
专栏目录
鲜为人知的object-fit属性，让您的img图片不再因为固定宽高而被拉伸压缩
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
03-13 6152
object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。 您可以通过使用 object-position 属性来切换被替换元素的内容对象在元素框内的对齐方式。 object-fit 属性由下列的值中的单独一个关键字来指定。 contain 被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框...
css3 object-fit/object-position 属性
u010007013的博客
10-30 268
object-fit 类似于background-size,表示图片内容在容器里如何显示，它有5种值： fill,contain,cover,none,scale-down 默认值是fill,不保持内容的宽高比拉伸到撑满容器； 而cover是覆盖满容器，但是保持内容的宽高比； contain是保持宽高比在容器里放下，可能会在容器里留下空白； none是保持宽高比且保持原始尺寸大小； scale-...
CSS3 object-fit 图像裁剪
weixin_30650039的博客
09-12 300
MDN定义 https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit 该object-fitCSS 属性指定替换元素的内容应该如何适应到其使用的高度和宽度确定的框。简单的说是处理替换元素（replaced elements） 的自适应问题，简单的说就是处理替换元素的变形（这里指长宽比例变形）； 可替换元素 http://op...
解决html2canvas不支持object-fit:contain和object-fit:cover问题
最新发布
u013896513的博客
08-08 468
html代码中包含img标签，img样式设置了object-fit属性后，通过html2canvas生成的图片object-fit属性没有生效，导致生成的图片形变。修改依赖包中html2canvas源码。即可实现object-fit:contain。
以目标图片尺寸按原比例缩放切割图片
coder 的历程
01-31 549
以目标图片尺寸按原比例缩放切割图片 来源：http://my.oschina.net/u/873047/blog/106551   需求：原始图片缩放为目标尺寸后，要求缩放后的图片保持原图片的样式不改变，但是缩放后图片的四边可以裁减。 原理：将待裁剪图片宽高相除值和目标尺寸宽高相除值进行比较，如果前者较大，说明待裁剪图片相对于目标尺寸来说要宽出一块，现在已高为基准进行裁剪，即将原始图片...
图片大小不太 如果按照设定的宽高则会使图片拉伸，使用object-fit裁剪图片
qq_45641978的博客
03-18 188
图片模糊等问题
让图片完美适应：掌握 CSS 的object-fit与object-position
粉丝们务必加入微信粉丝群
10-24 5456
在CSS中，我们可以使用 background-size 和background-position属性为背景图像设置大小和位置。而 object-fit 和 object-position 属性则允许我们对嵌入的图像（以及其他替代元素，如视频）做类似的操作。在本文中，我们将深入探讨如何使用 object-fit 将图像适应到特定的空间中，以及如何使用 object-position 在该空间中进行...
浅谈CSS中的 object-fit 与 object-position的使用
09-27
在CSS布局中，`object-fit`和`object-position`是两个非常重要的属性，它们主要用于处理替换元素（如图片、视频）在容器内的适应方式和位置调整。这两个属性可以帮助开发者更好地控制元素的显示效果，特别是在响应式...
CSS技巧：利用object-fit与object-position保持图片比例
在CSS中，`object-fit` 和 `object-position` 属性是用于控制内联或替换元素（如图像、视频等）如何适应其容器的两个关键属性。这些属性在处理图片、背景图像和其他媒体时非常有用，能够帮助开发者保持内容的视觉...
.list-container li .img-list { width: 100%; margin-top: 10px; /* position: relative; */ } ul{ list-style-type: none ; } .img-list .img { /* float: left; */ height: 300px; margin-right: 1%; /* margin-bottom: 10px; */ display: block; /* background-position: center; */ background-repeat: no-repeat; background-size: cover; object-fit: cover; /* -o-object-fit: contain; */ }这段css代码输出的图片不完整
06-13
你好，根据你提供的CSS代码，可能会有以下几个原因导致图片不完整： 1. 可能是图片的尺寸比容器的...综上，可以尝试调整容器的尺寸，或者使用`background-position`属性或者`object-fit`属性来解决图片不完整的问题。
如何使用 CSS object-fit 进行图片的缩放和裁剪
rubys007的博客
03-07 4237
在处理图片时，你可能会遇到需要保持原始宽高比的情况。保持宽高比可以防止图片被拉伸或压缩而出现失真。解决这个问题的常见方法是使用CSS 属性。更现代的方法是使用object-fitCSS 属性。在本文中，你将探索object-fitCSS 属性中可用的fillcovercontainnone和scale-down值的效果，以及它们如何裁剪和缩放图片。你还将探索CSS 属性以及它如何偏移图片。
使用object-fit:cover处理图片在容器变小时不会压缩，保留原始比例进行剪切缩放
huhuhuja
03-16 453
object-fit: fill|contain|cover|scale-down|none|initial|inherit; object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度 object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。 fill 默认，不保证保持原有的比例，内容拉伸填充整个内容容器。 尝试一下 » contain 保持原有尺寸比例。内容被缩放。 尝试一下 » .
canva画图 图片居中裁剪_CSS3 object-fit:cover 剪裁图片尺寸适配div - 居中并裁剪图片...
weixin_39638309的博客
12-20 360
今天来分享另一种最佳最完美的居中自动剪裁图片的功能，虽然IE8无法做到，但现在IE8还需要考虑吗？ 放弃吧，直接使用object-fit: cover;！你还记得通过设置图片的 background-size 属性可以解决很多问题的时刻吗？现在你可以使用 object-fit 了，它最先被 webkit 内核的浏览器支持，不久其他浏览器内核也陆续跟上，当然这里不包括IE8以下的IE浏览器.....
听说你还不会 Tailwind CSS（基础·中篇）
weixin_41990299的博客
05-02 795
1. 前言 上篇介绍了宽高、边距、边框、文本、颜色等常用基础属性，本篇继续基础内容，包括伪类、伪元素、flex 和 grid 布局、定位。 听说你还不会 Tailwind CSS(基础·上篇) 听说你还不会 Tailwind CSS(基础·中篇) 听说你还不会 Tailwind CSS(基础·下篇) 听说你还不会 Tailwind CSS(进阶·上篇) 2. 伪类 伪类是选择器的一种，...
CSS3 object-fit 和 object-postion 实现图片居中缩放
司马懿的西山居
02-25 2366
object-fit 值 描述 fill contain cover none scale-down <!DOCTYPE html> <html> <html> &amp
一些不常用的css 却好用的css 属性积累
Dong8508的博客
04-03 874
1、超过N行，显示... .good_title { word-break: break-all; //遇到英文单词允许拆分 overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clam...
object-fit和object-position——定义图片和视频元素在容器内如何显示的css属性
以休伯利安的名义
02-07 812
目录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
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值