图片因固定宽高被拉伸了?object-fit:一个神奇的属性
一、问题产生的场景
近期在完成项目开发时,测试人员针对漫画长图上传后的展示提出了一个界面优化的点,因为其特点是长,但是我们展示图片的区域是固定的,如果我们按照正常思路将图片的宽高写死,确实占位大小的问题解决了,但是当我们上传一个长图,现在我们会发现这个图片是被拉变形了的,如图1.1所示,这个时候我们想要使图片不因固定宽高而造成变形,就可以使用object-fit:cover来实现这个效果,如图1.2所示,当然该属性的属性值还有其他,下面我们一起来了解一下,当同一张图片使用不同属性值的时候会有什么样的展示效果。
二、object-fit的各个属性的作用
1.contain:被替换的内容将被缩放,以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比,因此如果宽高比与框的宽高比不匹配,该对象将被添加“留白”
如下图所示:

2.cover:被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配,该对象将被剪裁以适应内容框
如下图所示:
3.fill:被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配,那么该对象将被拉伸以适应内容框
如下图所示:
4.none:被替换的内容将保持其原有的尺寸
如下图所示:

5.scale-down:内容的尺寸与 none 或 contain 中的一个相同,取决于它们两个之间谁得到的对象尺寸会更小一些
如下图所示:

附:element中的image组件有对应的属性设置为fit,其属性值与原生的object-fit的属性值及效果完全相同

相关文章:
图片因固定宽高被拉伸了?object-fit:一个神奇的属性
一、问题产生的场景 近期在完成项目开发时,测试人员针对漫画长图上传后的展示提出了一个界面优化的点,因为其特点是长,但是我们展示图片的区域是固定的,如果我们按照正常思路将图片的宽高写死,确实占位大小的问题解决了…...
客户案例:中圣科技—CAC2.0防范盗号威胁,加固安全防线
客户背景 中圣科技(江苏)股份有限公司(以下简称“中圣科技”),是一家以技术研发为驱动,以清洁能源核心成套装备和节能环保工程服务为支撑的科技创新型企业。其以南京为核心运营基地,与当地政府…...
pandas数据分析40——读取 excel 合并单元格的表头
案例背景 真的很容易疯....上班的单位的表格都是不同的人做的,所以就会出现各种合并单元格的情况,要知道我们用pandas读取数据最怕合并单元格了,因为没规律...可能前几列没合并,后面几列又合并了....而且pandas对于索引很严格&am…...
Java后端开发面试题——微服务篇总结
Spring Cloud 5大组件有哪些? 随着SpringCloudAlibba在国内兴起 , 我们项目中使用了一些阿里巴巴的组件 注册中心/配置中心 Nacos 负载均衡 Ribbon 服务调用 Feign 服务保护 sentinel 服务网关 Gateway Ribbon负载均衡策略有哪些 ? RoundRobinRule&…...
第十一章MyBatis查询专题
返回单个Car 返回单个可以直接用Car接收返回参数 Car carCarMapper.getOne(100);返回多个Car 返回多个可以直接用List接收返回参数 List<Car> carCarMapper.getAll();用一个对象无法接受返回多个参数,用list可以接收返回一个参数 返回Map 如果没有合适的…...
测试驱动开发(TDD)
测试驱动开发(TDD) 本篇文章简单叙述一下什么是测试驱动开发,以及怎么进行测试驱动开发! TDD (Test Driven Development):(源于极限编程(XP))在不…...
深度学习|CNN卷积神经网络
CNN卷积神经网络 解决的问题人类的视觉原理原理卷积层——提取特征池化层——数据降维全连接层——输出结果 应用图像处理自然语言处理 解决的问题 在CNN没有出现前,图像对人工智能来说非常难处理。 主要原因: 图像要处理的数据量太大了。图像由像素组…...
【洁洁送书第五期】为什么我们要了解可观测性工程
导读 可观测性已成为一个热门话题,并广受关注。随着它的普及,“可观测性”不幸被误作“监控”或“系统遥测”的同义词。可观测性是软件系统的一个特征。而且,只有当团队采用新的实践进行持续开发时,才能在生产软件系统中有效利用这…...
将vue项目通过electron打包成windows可执行程序
将vue项目打包成windows可执行程序 1、准备好dist将整个项目打包 npm run build2、安装electron依赖 npm install electron --save-dev npm install electron-packager --save-dev"electron": "^13.1.4", "electron-packager": "^15.2.0…...
【0基础入门Python Web笔记】三、python 之函数以及常用内置函数
三、python 之函数以及常用内置函数 函数函数定义函数调用函数参数返回值 常用内置函数input()函数range()函数其它 更多实战项目可进入下方官网 函数 函数是一种用于封装可重复使用代码块的工具,能够将一系列操作组织成一个逻辑单元。 函数定义 在Python中&…...
相交链表00
题目链接 相交链表 题目描述 注意点 保证 整个链式结构中不存在环函数返回结果后,链表必须 保持其原始结构如果 listA 和 listB 没有交点,intersectVal 为 0 解答思路 两个链表从头开始遍历,如果其是在同一个位置处相交,则在…...
怎样压缩mp4视频大小?
怎样压缩mp4视频大小?由于视频文件的体积通常比其他类型的文件更大,因此它们需要更多的存储空间来保存。但是,如果我们的设备、应用程序或平台不支持某些视频格式或分辨率,或者我们没有足够的存储空间来容纳这些大型视频文件&…...
ubuntu20.04 安装使用 Indemind 双目相机
1、先按照官方wiki搭建环境 Ubuntu 安装 — IMSEE SDK 1.4.2 文档(ubuntu20使用官网会报错,可以参考我下面的步骤) 1.1、获取代码 sudo apt-get install git git clone https://github.com/indemind/IMSEE-SDK.git 1.2、准备依赖 cd <…...
一文读懂设备管理系统:是什么、谁需要、怎样选
工业的迅猛发展让人类向前迈出了史无前例的步伐,工业4.0将我们又带入了一个信息化技术促进工业变革的新时代——智能化时代。一台台机器设备是工业发展史上必不可少的参与者,但企业对设备的管理存在种种痛点,比如生产设备多,但备件…...
删除链表的中间节点
题目: 示例: 思路: 这个题类似于寻找链表中间的数字,slow和fast都指向head,slow走一步,fast走两步,也许你会有疑问,节点数的奇偶不考虑吗?while执行条件写成fast&&…...
Q/GDW 1597-2015《国家电网公司应用软件系统通用安全要求》
电力安全测试报告 电力行业检测标准 随着信息技术的快速发展和广泛应用,应用软件系统已成为企业信息化建设中不可或缺的重要组成部分。然而,应用软件系统的安全问题也随之而来,给企业和用户带来了潜在的风险和威胁。为了提高应用软件系统的…...
【前端从0开始】CSS——12、光标属性
光标属性 cursor 属性规定要显示的光标的类型(形状)。 该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状(不过 CSS2.1 没有定义由哪个边界确定这个范围)。 属性名效果crosshair精确定位“十”字形pointer“小手”形…...
文件四剑客
目录 前言 一、正则表达式 二、grep 三、find 四、sed 五、awk 前言 文件四剑客是指在计算机领域中常用的四个命令行工具,包括awk、find、grep和sed。它们在处理文本文件和搜索文件时非常强大和实用。 1. awk是一种强大的文本处理工具,它允许用户根据指…...
使用lambda表达式提取共用代码使其更加简洁
1、在开发预下单接口访问并发问题出现需要加锁代码如下 RLock lock redissonClient.getLock(String.format(appointmentKey, activityId, studentId));try {boolean tryLock lock.tryLock(10, 20, TimeUnit.SECONDS);if (tryLock) {AppointmentMallOrderInfoDTO appointmentM…...
【八股】2023秋招八股复习笔记3(智力题 非技术题50道)
文章目录 1、智力题赛⻢问题烧绳⼦问题找出最重球问题药丸问题有两个杯⼦,囚犯问题⽣孩⼦问题赢汽⻋问题卡牌问题拿硬币问题量⽔问题聚会问题数字游戏问题艾滋病问题找出变质药问题毒药问题分盐问题弹球问题病狗问题⽕⻋运煤问题分苹果问题分⾦条问题搬⾹蕉问题舀酒…...
使用VSCode开发Django指南
使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架,专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用,其中包含三个使用通用基本模板的页面。在此…...
连锁超市冷库节能解决方案:如何实现超市降本增效
在连锁超市冷库运营中,高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术,实现年省电费15%-60%,且不改动原有装备、安装快捷、…...
什么是库存周转?如何用进销存系统提高库存周转率?
你可能听说过这样一句话: “利润不是赚出来的,是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业,很多企业看着销售不错,账上却没钱、利润也不见了,一翻库存才发现: 一堆卖不动的旧货…...
零基础设计模式——行为型模式 - 责任链模式
第四部分:行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习!行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想:使多个对象都有机会处…...
OPENCV形态学基础之二腐蚀
一.腐蚀的原理 (图1) 数学表达式:dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一,腐蚀跟膨胀属于反向操作,膨胀是把图像图像变大,而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...
RSS 2025|从说明书学习复杂机器人操作任务:NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill
视觉语言模型(Vision-Language Models, VLMs),为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展,机器人仍难以胜任复杂的长时程任务(如家具装配),主要受限于人…...
Windows安装Miniconda
一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...
【Linux系统】Linux环境变量:系统配置的隐形指挥官
。# Linux系列 文章目录 前言一、环境变量的概念二、常见的环境变量三、环境变量特点及其相关指令3.1 环境变量的全局性3.2、环境变量的生命周期 四、环境变量的组织方式五、C语言对环境变量的操作5.1 设置环境变量:setenv5.2 删除环境变量:unsetenv5.3 遍历所有环境…...
学习一下用鸿蒙DevEco Studio HarmonyOS5实现百度地图
在鸿蒙(HarmonyOS5)中集成百度地图,可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API,可以构建跨设备的定位、导航和地图展示功能。 1. 鸿蒙环境准备 开发工具:下载安装 De…...
npm安装electron下载太慢,导致报错
npm安装electron下载太慢,导致报错 背景 想学习electron框架做个桌面应用,卡在了安装依赖(无语了)。。。一开始以为node版本或者npm版本太低问题,调整版本后还是报错。偶尔执行install命令后,可以开始下载…...
