当前位置: 首页 > news >正文

图片因固定宽高被拉伸了?object-fit:一个神奇的属性

一、问题产生的场景

        近期在完成项目开发时,测试人员针对漫画长图上传后的展示提出了一个界面优化的点,因为其特点是长,但是我们展示图片的区域是固定的,如果我们按照正常思路将图片的宽高写死,确实占位大小的问题解决了,但是当我们上传一个长图,现在我们会发现这个图片是被拉变形了的,如图1.1所示,这个时候我们想要使图片不因固定宽高而造成变形,就可以使用object-fit:cover来实现这个效果,如图1.2所示,当然该属性的属性值还有其他,下面我们一起来了解一下,当同一张图片使用不同属性值的时候会有什么样的展示效果。

图1.2
图1.1

 二、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();用一个对象无法接受返回多个参数&#xff0c;用list可以接收返回一个参数 返回Map 如果没有合适的…...

测试驱动开发(TDD)

测试驱动开发&#xff08;TDD&#xff09; 本篇文章简单叙述一下什么是测试驱动开发&#xff0c;以及怎么进行测试驱动开发&#xff01; TDD &#xff08;Test Driven Development&#xff09;&#xff1a;&#xff08;源于极限编程&#xff08;XP&#xff09;&#xff09;在不…...

深度学习|CNN卷积神经网络

CNN卷积神经网络 解决的问题人类的视觉原理原理卷积层——提取特征池化层——数据降维全连接层——输出结果 应用图像处理自然语言处理 解决的问题 在CNN没有出现前&#xff0c;图像对人工智能来说非常难处理。 主要原因&#xff1a; 图像要处理的数据量太大了。图像由像素组…...

【洁洁送书第五期】为什么我们要了解可观测性工程

导读 可观测性已成为一个热门话题&#xff0c;并广受关注。随着它的普及&#xff0c;“可观测性”不幸被误作“监控”或“系统遥测”的同义词。可观测性是软件系统的一个特征。而且&#xff0c;只有当团队采用新的实践进行持续开发时&#xff0c;才能在生产软件系统中有效利用这…...

将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()函数其它 更多实战项目可进入下方官网 函数 函数是一种用于封装可重复使用代码块的工具&#xff0c;能够将一系列操作组织成一个逻辑单元。 函数定义 在Python中&…...

相交链表00

题目链接 相交链表 题目描述 注意点 保证 整个链式结构中不存在环函数返回结果后&#xff0c;链表必须 保持其原始结构如果 listA 和 listB 没有交点&#xff0c;intersectVal 为 0 解答思路 两个链表从头开始遍历&#xff0c;如果其是在同一个位置处相交&#xff0c;则在…...

怎样压缩mp4视频大小?

怎样压缩mp4视频大小&#xff1f;由于视频文件的体积通常比其他类型的文件更大&#xff0c;因此它们需要更多的存储空间来保存。但是&#xff0c;如果我们的设备、应用程序或平台不支持某些视频格式或分辨率&#xff0c;或者我们没有足够的存储空间来容纳这些大型视频文件&…...

ubuntu20.04 安装使用 Indemind 双目相机

1、先按照官方wiki搭建环境 Ubuntu 安装 — IMSEE SDK 1.4.2 文档&#xff08;ubuntu20使用官网会报错&#xff0c;可以参考我下面的步骤&#xff09; 1.1、获取代码 sudo apt-get install git git clone https://github.com/indemind/IMSEE-SDK.git 1.2、准备依赖 cd <…...

一文读懂设备管理系统:是什么、谁需要、怎样选

工业的迅猛发展让人类向前迈出了史无前例的步伐&#xff0c;工业4.0将我们又带入了一个信息化技术促进工业变革的新时代——智能化时代。一台台机器设备是工业发展史上必不可少的参与者&#xff0c;但企业对设备的管理存在种种痛点&#xff0c;比如生产设备多&#xff0c;但备件…...

删除链表的中间节点

题目&#xff1a; 示例&#xff1a; 思路&#xff1a; 这个题类似于寻找链表中间的数字&#xff0c;slow和fast都指向head&#xff0c;slow走一步&#xff0c;fast走两步&#xff0c;也许你会有疑问&#xff0c;节点数的奇偶不考虑吗&#xff1f;while执行条件写成fast&&…...

Q/GDW 1597-2015《国家电网公司应用软件系统通用安全要求》

电力安全测试报告 电力行业检测标准 随着信息技术的快速发展和广泛应用&#xff0c;应用软件系统已成为企业信息化建设中不可或缺的重要组成部分。然而&#xff0c;应用软件系统的安全问题也随之而来&#xff0c;给企业和用户带来了潜在的风险和威胁。为了提高应用软件系统的…...

【前端从0开始】CSS——12、光标属性

光标属性 cursor 属性规定要显示的光标的类型&#xff08;形状&#xff09;。 该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状&#xff08;不过 CSS2.1 没有定义由哪个边界确定这个范围&#xff09;。 属性名效果crosshair精确定位“十”字形pointer“小手”形…...

文件四剑客

目录 前言 一、正则表达式 二、grep 三、find 四、sed 五、awk 前言 文件四剑客是指在计算机领域中常用的四个命令行工具&#xff0c;包括awk、find、grep和sed。它们在处理文本文件和搜索文件时非常强大和实用。 1. awk是一种强大的文本处理工具&#xff0c;它允许用户根据指…...

使用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、智力题赛⻢问题烧绳⼦问题找出最重球问题药丸问题有两个杯⼦&#xff0c;囚犯问题⽣孩⼦问题赢汽⻋问题卡牌问题拿硬币问题量⽔问题聚会问题数字游戏问题艾滋病问题找出变质药问题毒药问题分盐问题弹球问题病狗问题⽕⻋运煤问题分苹果问题分⾦条问题搬⾹蕉问题舀酒…...

手把手教你写一个能自动上网写研报的 Research Agent

手把手教你写一个能自动上网写研报的 Research Agent 引言 痛点引入 如果你是券商研究员、行业分析师、高校商科学生,或者企业战略岗的从业者,一定对「写研报」这件事的痛苦深有体会: 查资料耗时:一篇中等深度的行业研报,至少需要翻阅30+权威来源的信息,包括工信部政策…...

告别RAM焦虑:手把手教你用MicroBlaze BootLoader把大程序塞进QSPI Flash和DDR3

突破FPGA内存瓶颈&#xff1a;MicroBlaze大型程序加载实战指南 当你的MicroBlaze项目从简单的控制逻辑升级到需要文件系统、网络协议栈甚至实时操作系统时&#xff0c;代码体积的膨胀速度往往超出预期。那些曾经足够用的BRAM资源突然变得捉襟见肘——这就像试图在智能手机上运行…...

基于Nuxt 4与Shadcn/ui的现代化全栈仪表板模板开发指南

1. 项目概述&#xff1a;一个现代化的全栈仪表板起点如果你正在寻找一个能快速启动企业级后台管理、数据可视化或内容管理系统的技术栈&#xff0c;那么你很可能已经厌倦了从零开始配置的繁琐。每次新项目&#xff0c;都要重新折腾 Nuxt 的配置、UI 组件库的集成、样式工具链、…...

别再为论文格式掉头发了!Paperxie 一键搞定 4000 + 高校排版规范

paperxie-免费查重复率aigc检测/开题报告/毕业论文/智能格式排版/文献综述/AI PPThttps://www.paperxie.cn/format/typesettinghttps://www.paperxie.cn/format/typesetting 你有没有过这种经历&#xff1a;论文内容改到导师点头&#xff0c;却栽在格式这最后一关&#xff1f;…...

小波散射网络:从理论优势到小样本图像分类实践

1. 小波散射网络为什么值得关注 第一次听说小波散射网络时&#xff0c;我和大多数搞机器学习的朋友反应一样&#xff1a;"这玩意儿和普通卷积神经网络&#xff08;CNN&#xff09;有什么区别&#xff1f;"直到去年接手一个医疗影像项目&#xff0c;手头只有200张标注…...

从2013年俄罗斯科技路演看技术商业化:硬件集成、异构计算与生态挑战

1. 项目概述&#xff1a;一次被遗忘的科技路演及其启示2013年秋天&#xff0c;在硅谷的心脏圣克拉拉&#xff0c;发生了一场如今看来颇具历史意味的科技路演。俄罗斯&#xff0c;这个在世人印象中与能源、重工业紧密相连的国家&#xff0c;派出了一支由政府和产业界高层领衔的代…...

【Midjourney v8图像修复终极指南】:9大隐藏参数调优+3类高频崩坏场景实战修复(2024官方未公开文档级解析)

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Midjourney v8图像修复功能全景概览 Midjourney v8 引入了革命性的图像修复&#xff08;Image Inpainting&#xff09;能力&#xff0c;不再依赖外部图层或第三方工具&#xff0c;而是通过原生提示词指…...

如何快速解析SWF文件:JPEXS免费Flash反编译器的完整指南

如何快速解析SWF文件&#xff1a;JPEXS免费Flash反编译器的完整指南 【免费下载链接】jpexs-decompiler JPEXS Free Flash Decompiler 项目地址: https://gitcode.com/gh_mirrors/jp/jpexs-decompiler JPEXS Free Flash Decompiler是一款功能强大的开源Flash逆向工程工具…...

别再在循环里写Thread.sleep()了!IntelliJ IDEA这个告警到底在说什么?

循环中的Thread.sleep()&#xff1a;为什么IntelliJ IDEA警告你正在"忙等待"&#xff1f; 在IntelliJ IDEA中编写Java代码时&#xff0c;你是否遇到过这样的警告&#xff1a;"Call to Thread.sleep() in a loop, probably busy-waiting"&#xff1f;这个看…...

如何彻底解决JavaScript浮点数精度问题:decimal.js完整指南

如何彻底解决JavaScript浮点数精度问题&#xff1a;decimal.js完整指南 【免费下载链接】decimal.js An arbitrary-precision Decimal type for JavaScript 项目地址: https://gitcode.com/gh_mirrors/de/decimal.js 你是否曾经遇到过JavaScript中0.1 0.2 ≠ 0.3的尴尬…...