object-fit
发表于|更新于
|浏览量:
能轻易做到别人感觉困难的事是人才；能轻易做到别人所不能做的工作是天才。——西德尼
讲一个小技巧，对于图片裁剪可以用这个属性：object-fit
object-fit 是一个 CSS 属性，用于指定替换元素（如 <img> 和 <video>）内容的尺寸如何适应其容器。它定义了内容如何填充容器的大小，以及是否保持内容的比例
例如：
1 | <div style="width: 400px; height: 400px; overflow: hidden;"> |
相关推荐
2024-05-17
处理js的JSON.parse中Number太长导致精度丢失问题
大自然的真实和单纯，常是重要艺术极点的基础。——恩格斯 代码如下： 1"token".split(".").slice(0,2).map(i=>JSON.parse(atob(i))) 这里主要是 JSON.parse 导致的，我简单复现一下 1JSON.parse('{"id":9052710354240385291}') 得到的是 1{id: 9052710354240385000} 可以看到后面的 291 变为 000 了 解决方式这里使用正则匹配 /:\s*([-+]?\d+(\.\d+)?([eE][-+]?\d+)?)/g 例如： 123456JSON.parse('{"id":9052710354240385291}'.replace(/:\s*([-+]?\d+(\.\d+)?([eE][-+]?\d+)?)/g, (match, p1) => { ...
2022-12-22
css is选择器
良药苦口利于病，忠言逆耳利于行——佚名 MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/:is is选择器可以同时包含多个，例如 12345678910111213/* 选择 header、main、footer 里的任意一个悬浮状态的段落 */:is(header, main, footer) p:hover { color: red; cursor: pointer;}/* 以上内容相当于以下内容 */header p:hover,main p:hover,footer p:hover { color: red; cursor: pointer;} 非常实用
2022-08-22
webpack资源管理
天分高的人如果懒惰成性，亦即不自努力以发展他的才能，则其成就也不会很大，有时反会不如天分比他低些的人。——茅盾 书接上文，首先对上次的项目进行改造，参考：https://webpack.docschina.org/guides/asset-management/ 将main.js改为bundle.js index.html 12345678910<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>管理资源</title> </head> <body> <script src="bundle.js"></script> </body></html> webpack.config.js 123456789const path = require('path');module.expo...
2025-02-05
vue-vben-admin
你与别人花费一样的时间，因为别人用心，而你吊儿郎当，所以到了最后检验成果的时候，别人成功，而你除了赔了时间之后，一无所得。——飞行员舒克 https://github.com/vbenjs/vue-vben-adminhttps://www.vben.pro/ 在开发后台管理系统时，Vue Vben Admin 是一个让我印象深刻的项目。它基于 Vue 3、Vite 和 TypeScript，为开发者提供了一个功能丰富的中后台模板，开箱即用。通过结合现代前端技术栈，Vben Admin 在性能优化、开发体验和灵活性上都表现得非常出色。 项目特点 最新技术栈：使用 Vue 3 和 Vite 进行开发，支持热更新和快速构建，极大提升了开发效率。 TypeScript 支持：代码类型安全、自动补全，降低了代码维护成本。 主题系统：支持多套预定义主题，用户还可以自定义主题色彩，打造符合品牌风格的界面。 国际化（i18n）：内置国际化方案，支持多语言切换，方便面向全球用户的项目开发。 权限管理：提供动态路由和权限控制方案，可以根据用户角色灵活配置不同的页面和功能访问权限。 这些特点...
2020-09-05
vue结合elementUI进行快速开发
人生最重要的不是努力，不是奋斗，而是抉择。 我们引入一个elementUI 1cnpm i element-ui 然后在main.js中引入 我们来做个测试，首先在页面中的methods中定义个welcome方法 123456789methods: { welcome() { this.$message({ showClose: true, message: "欢迎", type: "success", }); },}, 然后在created中调用该方法 进入home页面，刷新 可以看到效果了 那我们再引入个导航栏 首先创建header.vue 然后编写导航栏 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869<...
2024-07-17
进阶学习css的filter属性
经常谈论别人的短处只会使一个人心胸狭窄，使一个人变得非常多疑，非常无聊。——泰戈尔 首先是这个教程 Filter | CSS-Tricks 还有这个 Filter | CSS-Tricks 这里还有一个在线演示的网址 CSS filter Editor 你可以任意滑动值查看效果 See the Pen CSS filter Editor by Mads Stoumann (@stoumann) on CodePen.
阿超
我的名字叫阿超 年龄25岁 家在北京市 职业是软件开发 每天最晚也会在八点前回家 不抽烟 酒浅尝辄止 晚上十二点上床 保证睡足八个小时 睡前写一篇博客 再做二十分钟俯卧撑暖身 然后再睡觉 基本能熟睡到天亮 像婴儿一样不留下任何疲劳和压力 就这样迎来第二天的早晨 健康检查结果也显示我很正常 我想说明我是一个不论何时都追求内心平稳的人 不拘泥于胜负 不纠结于烦恼 不树立使我夜不能寐的敌人 这就是我在这社会的生活态度
Follow Me公告
This is my Blog