object-fit
发表于|更新于
|浏览量:
能轻易做到别人感觉困难的事是人才;能轻易做到别人所不能做的工作是天才。——西德尼
讲一个小技巧,对于图片裁剪可以用这个属性:object-fit
object-fit 是一个 CSS 属性,用于指定替换元素(如 <img> 和 <video>)内容的尺寸如何适应其容器。它定义了内容如何填充容器的大小,以及是否保持内容的比例
例如:
1 | <div style="width: 400px; height: 400px; overflow: hidden;"> |
相关推荐
2022-05-30
docsify
冗长的黑暗中,你是我唯一的光。——《白夜行》 分享一个文档构建工具docsify 官方网址:https://docsify.js.org/#/zh-cn/ 基本上现在很多开源项目都是基于其构建 主要是样式简洁、编写、部署方便,基于markdown文件生成目录、文章 非常适合程序员 快速开始:https://docsify.js.org/#/zh-cn/quickstart
2022-12-19
css attr
过于大方的施舍会导致盗窃——西塞罗 分享一个css函数attr MDN:https://developer.mozilla.org/zh-CN/docs/Web/CSS/attr attr可以获取我们标签内的属性作为值 例如: 1<p data-foo="hello">world</p> css: 123[data-foo]::before { content: attr(data-foo) " ";} 效果: [data-foo]::before { content: attr(data-foo) " "; } world 除了data-*的自定义属性,也可以获取其他的,例如custom-prefix 123456<style>[custom-prefix]::before { content: attr(custom-prefix);}</style><p custom-prefix="hello"&g...
2024-03-17
full-stack-fastapi-template
过一个平凡无趣的人生实在太容易了,你可以不读书,不冒险,不运动,不写作,不外出,不折腾。但是,人生最后悔的事情就是:我本可以。——陈素封 分享一个全栈框架 GitHub - tiangolo/full-stack-fastapi-template: Full stack, modern web application template. Using FastAPI, React, SQLModel, PostgreSQL, Docker, GitHub Actions, automatic HTTPS and more. 全栈、现代 Web 应用程序模板。使用 FastAPI、React、SQLModel、PostgreSQL、Docker、GitHub Actions、自动 HTTPS 等 ⚡ 用于 Python 后端 API 的 FastAPI。 🧰 用于 Python SQL 数据库交互 (ORM) 的 SQLModel。 🔍 Pydantic,由 FastAPI 使用,用于数据验证和设置管理。 💾 PostgreSQL 作为 SQL 数据库。 �...
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<...
2021-06-26
reverse
清风两袖朝天去,免得闾阎话短长。――于谦《入京诗》 js中翻转数组可以使用reverse函数
2021-12-19
flex布局
他想给M打一个电话,告诉她,他要回家了。不再回来了。最后他只是发了短信道:“M,我不爱你,从来没有爱过,因为我心里装着别人。”窗外掠过的景,就好像他的泪一样,总是一闪而过。——灵遁者 flex布局是开发中最常用的布局之一 阮一峰的flex布局教程 下方摘自uniapp官方文档flex布局一栏 FlexboxFlex 容器Flex 是 Flexible Box 的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。 nvue布局模型基于 CSS Flexbox,以便所有页面元素的排版能够一致可预测,同时页面布局能适应各种设备或者屏幕尺寸。Flexbox 包含 flex 容器和 flex 成员项。如果一个nvue元素可以容纳其他元素,那么它就成为 flex 容器。 文档中未说明的 flexbox 属性均不支持:如 order、flex-grow 、flex-shrink 、 flex-basis、align-content、align-self 等。 在 nvue中,Flexbox 是默认且唯一的布局模型,所以你不需要手动为元素添加 display: flex; 属性。...

阿超
我的名字叫阿超 年龄25岁 家在北京市 职业是软件开发 每天最晚也会在八点前回家 不抽烟 酒浅尝辄止 晚上十二点上床 保证睡足八个小时 睡前写一篇博客 再做二十分钟俯卧撑暖身 然后再睡觉 基本能熟睡到天亮 像婴儿一样不留下任何疲劳和压力 就这样迎来第二天的早晨 健康检查结果也显示我很正常 我想说明我是一个不论何时都追求内心平稳的人 不拘泥于胜负 不纠结于烦恼 不树立使我夜不能寐的敌人 这就是我在这社会的生活态度
Follow Me公告
This is my Blog