程序员经验分享-hwhale

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

2023-11-13

img标签的图片设置width:100%,height: 211px，默认图片拉伸或压缩以适应此宽高
在这里插入图片描述原有
但是这样太丑了，所以我们需要把图片裁剪一下，让它不拉伸以原有比例填充屏幕，首先使用到object-fit这个属性，

objtct-fit、object-position释义

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.
CSS 属性指定被替换元素的内容应如何适应由其使用的高度和宽度建立的框。

object-postion ： property determines the alignment of the replaced element inside its box.
属性确定被替换元素在其框内的对齐方式。

所以这里的object实际上指的是replaced element(替换元素)，即input、textarea等form表单控件、video、auido、img等内容可以被src或者content等属性替换内容的元素。（具体参考见张鑫旭-半深入理解CSS3 object-position/object-fit属性/）

object-fit值：

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

contain - 包含，保持原有比例，保证容器内放的下但是会有留白
在这里插入图片描述

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

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

在这里插入图片描述
在这里插入图片描述

scale-down - 降低，依次设置none或contain，最终呈现尺寸较小的那个
在这里插入图片描述

所以在我们的场景中，需要使用到的是object-fit:cover这个属性，保持原有比例进行裁剪，但是默认的裁剪的内容是50% 50%,也就是中心位置居中效果，所以我们需要使用object-position属性来定位一下裁剪位置

object-position： top — 内容定位在窗口左上角
在这里插入图片描述

object-position： 100% 100% — 内容定位在窗口右下角
在这里插入图片描述

object-position: calc(100% -20px) calc(100% - 10px)
在这里插入图片描述

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

img

objectfit

objectposition

图片保持比例裁剪

object-fit和object-position实现图片原比例裁剪不拉伸适应 的相关文章

  • CSS @supports (::伪元素)

    我想将区域更改为最大溢出 仅在以下情况下滚动 webkit scrollbar thumb是支持的 在纯 CSS 中这可能吗 看起来 supports只检查规则 不检查选择器 您现在可以使用 supports selector https

  • 如何在Nightwatch中测试伪元素的css属性

    我想使用 Nightwatch 测试我的网站上的背景图像是否正确 但它设置为 before 伪元素的背景 这是 CSS icon circle delete before content background url images svg

  • 工具提示出现在 intro.js 移动视图中的元素上方

    我正在使用 intro js 初步浏览我网站上的页面 该游览在桌面上看起来不错 但在移动设备上 工具提示出现在它所描述的元素的正上方 用户无法在移动视图中看到该元素 因为工具提示出现在该元素的正上方 见下图 我尝试自定义工具提示的位置 但输

  • CSS淡入淡出动画延迟计时

    我正在尝试使用 css3 创建幻灯片效果 我有三张图像 我需要将它们相互淡入淡出 每次转换需要持续 3 秒 第一张图像显示 3 秒 然后淡入第二张图像 第三张图像同样显示 我不确定如何计算关键帧的百分比 Codepen http codep

  • CSS 选择器：id 或类中的第一个 div

    用于选择类中或具有特定 id 的第一个 div 的正确 CSS 选择器是什么 对于父 子元素来说 这似乎要容易得多 但我还没有找到简单元素的任何内容 更新 解决方案 我发现的最干净 最兼容的解决方案是 class class 它选择前一个类

  • 折叠和展开选项卡 jquery / 简单的手风琴

    我对手风琴选项卡有疑问 我用过手风琴菜单插件 下面的代码我用于页面中的选项卡 accordions accordion title about Content 1 accordion accordion title Home Content

  • 是否有CSS“：drop-hover”伪类？

    说我有一个input type file 场地 人们可以在上面放置一个文件input 就像在 Firefox 中一样 而不是单击 浏览 并选择文件 现在 我想对其进行一些自定义 方法是在将文件放入其中时更改字段的背景颜色input 我真的无

  • height: calc(100%) 在 CSS 中无法正常工作

    我有一个 div 我想填充主体的整个高度减去设定的像素数 但我无法得到height calc 100 50px 上班 我想这样做的原因是我有一些元素具有基于一些不同标准的动态高度 例如标题的高度根据它可以包含的不同元素而变化 然后 内容 d

  • Bootstrap 4 网格系统中的“col”上没有填充是否正常？

    我是第一次使用 Bootstrap v 4 我有一个footer就是使用新的flex col并且它在桌面上运行得很好 但是当我切换到移动设备时 它们彼此堆叠得如此紧密 没有垂直边距 填充 这是正常行为吗 另外 我希望内容居中或至少有一些偏移

  • CSS：悬停在多个 div 上时显示样式

    我有 2 个不同尺寸的 div 一个放在另一个上面 所以有一个共同的交叉区域 这两个 div 都有 CSS hover 规则集 如果我将鼠标悬停在每个 div 上 则规则适用 但是 如果我移过交叉区域 则只会激活顶部 div 悬停 当鼠标悬

  • 针对较小屏幕的拆分表行

    我有一个固定宽度为 960px 有 5 列的表格 当我在移动设备中查看时 我想制作第 3 4 5 列 看起来就像在下一行 有什么方法可以让 CSS 打断一行 使其看起来像这样 但是 还保留原来的HTML代码吗 您可以使用 FlexBox f

  • 如何将CSS应用于iframe内容？ [关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 我无法让 CSS 生成的内容发挥作用

  • 表格单元格固定高度，无论单元格内容如何

    我有一个动态表 是在从用户那里获取一些输入以呈现一些表格数据后生成的 我需要知道是否可以为单元格分配固定的高度 即使其中一些单元格有一些内容 文本 我希望所有单元格的高度均为 30px 无论它们是否有内容或是否为空 这是我的CSS tabl

  • CSS - 当 Margin-Top 存在时，Margin-Bottom 被忽略

    我有一个场景 我有多个 DIV 与 margin top 和 margin bottom 堆叠在一起 但我发现当我有 margin top 时 margin bottom 被忽略 我无法解释这是如何发生的 html div class bo

  • 同位素 Jquery 插件布局问题

    我正在尝试在此站点上设置同位素 它需要处理布局 并且我需要能够将项目附加到容器中 问题是它似乎没有正确初始化图像 这是我初始化它的方法 document ready function var container container cont

  • 无需 JavaScript 的图像翻转

    我试图找到一种不使用 javascript 的方法 该方法允许您将鼠标悬停在较小的 div 或图像 上来更改较大 div 的背景 纯粹使用 HTML 和 CSS 可以吗 该示例有 2 个问题 1 仅滚动其中一个 div 有效 因为它紧随其后

  • 防止左浮动 div 转到新行

    我有 4 个 div 设置为向左浮动 但最后的 div 不断在较小的屏幕上换行两个新行 这真的很烦我 我希望它们随屏幕尺寸缩放 以便它们始终保持在同一行上屏幕尺寸 并且我尝试不使用桌子 这非常诱人 因为他们对此非常可靠 我想知道如何解决这个

  • Bootstrap 中的垂直菜单

    有没有办法使用任何引导类来创建垂直菜单 不是下拉菜单 侧边栏上完全独立的垂直菜单 我可以使用我的 css 创建一个 但只是想知道引导程序中是否有任何内置类 或者可以使用顶部栏通过任何 hack 来完成吗 这个问题现在已经很老了 但如果有人看

  • 浮动的垂直对齐方式：左div的

    我有大约 10 个宽度相等但高度不同的 div 我希望它们尽可能紧密地组合在一起 当设置为向左浮动时 它们不会垂直彼此对齐 而是与上面 行 的底部对齐 我在下面模拟了一个小例子 想要去掉空白 你有什么建议吗 我仅限于使用这种格式 因为内容是

  • 常见的 Web UI 样式

    在接下来的几天里 我必须向我的一位客户展示一个 Web 应用程序的原型 问题是我不太擅长 CSS 最糟糕的是我几乎对得到的结果不满意 编写业务逻辑对我来说没有任何挑战 但 UI 设计却占用了我 80 以上的时间 我不需要什么令人惊叹的东西

随机推荐

  • java复制文件的4种方式及拷贝文件到另一个目录下的实例代码

    这篇文章主要介绍了java复制文件的4种方式 通过实例带给大家介绍了java 拷贝文件到另一个目录下的方法 需要的朋友可以参考下 尽管Java提供了一个可以处理文件的IO操作类 但是没有一个复制文件的方法 复制文件是一个重要的操作 当你的程

  • 在计算机中安装深度操作系统

    深度操作系统是一个国产的Linux发行版 界面美观 系统友好 中文支持完善 易上手 对于Linux新手来说 是一个不错的操作系统 这里将我安装深度操作系统的过程复述一下 在这里 我用的是UEFI GPT的方式来安装的 安装准备 一张容量足够

  • js弹出弹窗，并从弹窗中取值，返回父页面

    弹出弹框 url pageContext request contextPath facegl eyecool eyecool jsp pqdwbmid pqdwbmid rytype rytype open win window open

  • 数字IC设计笔试面试经典题（1-10）

    1 基础知识 1 1 锁存器的结构 锁存器即Latch 数电中称之为电平触发的D触发器 也是D型锁存器 有电平触发器SR触发器改进得到 其工作特点是电平是有效电平 高电平或者低电平 期间 才接受信号并输出 否则保持不变 1 2 DFF的结构

  • ctf（一）：攻防世界

    网址 https adworld xctf org cn 1 post传参 2 get传参直接在后面加 id 1 3 robots txt 文件 直接在网址后面加 robots txt 就会显示后台文件 4 index php 后缀是 ph

  • C++类中this指针的理解

    https www cnblogs com liushui sky p 5802981 html 很好的文

  • 中国国家气象局天气预报信息接口

    想在自己的android应用中获得当天的天气情况 这该怎么做呢 不用担心 中国国家气象局提供了获取所在城市天气预报信息接口 通过这个接口 我们就可以获取天气信息了 中国国家气象局天气预报接口总共提供了三个 http www weather

  • 【人工智能业务概述】—人工智能的技术框架

    人工智能业务概述 人工智能的技术框架 人工智能的技术框架按照产业生态通常可以划分为基础层 技术层 应用层三大板块 其中 基础层提供了支撑人工智能应用的基础设施和技术 包括存储和处理大规模数据的能力 以及高性能的计算和通信基础设施 技术层提供

  • 怎么查看华为服务器型号,云服务器型号查看

    云服务器型号查看 内容精选 换一换 华为云帮助中心 为用户提供产品简介 价格说明 购买指南 用户指南 API参考 最佳实践 常见问题 视频帮助等技术文档 帮助您快速上手使用华为云服务 根据后端云服务器组的ID查询后端云服务器组详情 GET

  • FFmpeg编译与集成

    Java是 write once run anywhre 但 C 不一样 各平台均有差异 无法只写一次 而且各个平台的编译都不一样 比如android的ndk工具链 不同平台的库都是不一样的 本文主要讲解下 ffmpeg 在 win 平台下

  • 【Java基础篇】一文搞懂Java方法的调用与重载（超详细）

    个人主页 兜里有颗棉花糖 欢迎 点赞 收藏 留言 加关注 本文由 兜里有颗棉花糖 原创 收录于专栏 JavaSE primary 目录 一 方法的概念以及使用 1 1什么是方法 1 2方法定义 1 3方法调用的执行过程 1 4形参和实参的关

  • Python —— PyQT5 安装及配置

    PyQT5 安装及配置 下载离线安装包 测试 Pycharm配置qt designer扩展 配置 QTdesigner 配置PyUIC 配置PyRCC 测试扩展的可用性 如果报错 下载离线安装包 PyQT5 5 15 whl 文件大概60M

  • C# 9.0 新特性预览 - 类型推导的 new

    前言 随着 NET 5 发布日期的日益临近 其对应的 C 新版本已确定为 C 9 0 其中新增加的特性 或语法糖 也已基本锁定 本系列文章将向大家展示它们 目录 C 9 0 新特性预览 类型推导的 new C 9 0 新特性预览 空参数校验

  • python输出中文字符

    coding utf 8 import as import matplotlib pyplot as plt 解决中文显示问题 plt rcParams font sans serif SimHei plt rcParams axes un

  • C语言---离散数学实验--集合及二元关系的应用

    目录 集合的运算 题目要求 代码 等价关系的判定 题目要求 代码 N元关系 题目描述 代码 集合的运算 题目要求 一 集合的运算 1 用数组A B C E表示集合 输入数组A B E 全集 输入数据时要求检查数据是否重复 集合中的数据要求不

  • 网络安全和黑客技能：15本必读书籍推荐

    前言 网络安全和黑客技能紧密相连 想要有效地防范黑客攻击 了解黑客的技能和思维方式非常重要 而要想成为一名合格的白帽黑客 也需要深入理解网络安全的基本原理和最佳实践 本文将介绍15本网络安全和黑客书籍 既包括了防范黑客攻击的指南书籍 也包括

  • ubuntu配置VLAN的方法

    目录 前言 一 VLAN是什么 二 Ubuntu如何配置VLAN IP 1 依赖安装 2 创建VLAN 总结 前言 在做someip相关开发的时候需要使用到VLAN 这里介绍如何在ubuntu上创建VLAN 一 VLAN是什么 VLAN V

  • RFID技术的优势

    什么是RFID技术 RFID射频识别是一种非接触式的自动识别技术 它通过射频信号自动识别目标对象并获取相关数据 识别工作无须人工干预 可工作于各种恶劣环境 EFID技术可识别高速运动物体并可同时识别多个标签 操作快捷方便 短距离射频产品不怕

  • 性能测试总结

    性能调优是什么 我们为什么要进行性能调优 主要是由以下几个点来考虑 1 编写的新应用上线前在性能上无法满足需求 这个时候需要对系统进行性能调优 2 应用系统在线上运行后随着系统数据量的不断增长 访问量的不断上升 系统的响应速度通常越来越慢

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

    img标签的图片设置width 100 height 211px 默认图片拉伸或压缩以适应此宽高 原有 但是这样太丑了 所以我们需要把图片裁剪一下 让它不拉伸以原有比例填充屏幕 首先使用到object fit这个属性 objtct fit

热门标签