object-fit
发表于|更新于
|浏览量:
能轻易做到别人感觉困难的事是人才；能轻易做到别人所不能做的工作是天才。——西德尼
讲一个小技巧，对于图片裁剪可以用这个属性：object-fit
object-fit 是一个 CSS 属性，用于指定替换元素（如 <img> 和 <video>）内容的尺寸如何适应其容器。它定义了内容如何填充容器的大小，以及是否保持内容的比例
例如：
1 | <div style="width: 400px; height: 400px; overflow: hidden;"> |
相关推荐
2023-06-09
psd.js
唯有在回敬污蔑和诽谤的时候，沉默才显得如此有力——艾迪生 分享一个js库，能操作psd文件 https://github.com/meltingice/psd.js 代码例子： NodeJS Example12345678910111213var PSD = require('psd');var psd = PSD.fromFile("path/to/file.psd");psd.parse();console.log(psd.tree().export());console.log(psd.tree().childrenAtPath('A/B/C')[0].export());// You can also use promises syntax for opening and parsingPSD.open("path/to/file.psd").then(function (psd) { return psd.image.saveAsPng('./output.pn...
2024-09-22
position-try
教育的胜利，可以压倒国民性。——爱默生 https://css-tricks.com/almanac/properties/p/position-try-fallbacks/ 今天分享一个position-try的css属性 它就像字面意思是说： 位置-尝试 代表着 它在页面移动时尽可能尝试调整位置 举个栗子： 1234567.target { position: absolute; position-anchor: --my-anchor; position-area: top; position-try-fallbacks: bottom;} 我写下代码： 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273<style> /* 定义一个锚点元素 */ .anchor { an...
2024-09-15
Vitest集成github action
精神上最好的避难所还是书本：它们既不会忘了你，也不会欺骗你。——罗曼·罗兰 我们已经知道vitest是一个很好用的单元测试框架，我们今天聊一下如何在github action集成vitest 首先我们创建项目 1234567891011121314151617181920212223242526272829303132333435363738394041424344Last login: Mon Sep 9 16:43:09 on ttys004 The default interactive shell is now zsh.To update your account to use zsh, please run `chsh -s /bin/zsh`.For more details, please visit https://support.apple.com/kb/HT208050.Github-Id-VampireAchao:streampark achao$ cd /Users/achao/IdeaProjects/simple-vitest# 安装vitest...
2026-09-29
kordoc
学习必须与实干相结合。——泰戈尔 Kordoc：让韩文办公文档不再困在格式里项目地址：https://github.com/chrisryugj/kordoc 在很多办公场景中，文档并不只是文字的容器。 它可能是一份层级严密的计划书，一张合并单元格密布的表格，一份带有复杂格式的行政公文，一份需要填写姓名、地址、日期与审批信息的申请表，也可能是一份扫描件、老旧 HWP 文件，或等待比对修订痕迹的新旧版本材料。 这些文档往往有一个共同问题：内容明明就在里面，却不容易被程序真正理解。 Kordoc 选择直面这片复杂地带。它是一套面向 HWP、HWPX、PDF、Office 文档与图像的文档处理工具，能够将内容转换为 Markdown 和结构化数据，并提供文档比较、表单填充、HWPX 生成、格式保留编辑、渲染预览、OCR、隐私信息遮盖与 MCP 工具调用能力。 它的目标并不只是把文件“读出来”，而是尽可能让文档中的结构、表格、页面、格式语义与办公流程重新变得可操作。 从 HWP 到 PDF：把文档翻译成可理解的结构Kordoc 支持处理多种常见格式： HWP 3.x HWP 5.x...
2022-06-21
ts装饰器(注解)
书，能保持我们的童心；书能保持我们的青春。——严文井 官方文档：https://www.typescriptlang.org/docs/handbook/decorators.html 这个东西在java里叫注解，不过在ts中，一个装饰器对应一个方法 首先执行命令： 1tsc --target ES5 --experimentalDecorators 然后配置一下tsconfig.json就可以使用了 123456{ "compilerOptions": { "target": "ES5", "experimentalDecorators": true }} 首先我们定义一个class 1234class User { private id: Number | undefined; private name: string | undefined;} 我们编写一个装饰器对应的逻辑，实现ja...
2021-12-21
import模块失效
一点浩然气，千里快哉风。——宋•苏轼 昨天公司实习生问我这个import为什么一直报错，他代码如下： 报错信息如下： 1Uncaught SyntaxError: Cannot use import statement outside a module 实际上是因为script标签没有加type导致的 12345678910111213<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="module"> import {ruben} from './js/module.js' console.log(ruben) </script> </body></html> 这样就可以了 可以看到正常...
阿超
我的名字叫阿超 年龄25岁 家在北京市 职业是软件开发 每天最晚也会在八点前回家 不抽烟 酒浅尝辄止 晚上十二点上床 保证睡足八个小时 睡前写一篇博客 再做二十分钟俯卧撑暖身 然后再睡觉 基本能熟睡到天亮 像婴儿一样不留下任何疲劳和压力 就这样迎来第二天的早晨 健康检查结果也显示我很正常 我想说明我是一个不论何时都追求内心平稳的人 不拘泥于胜负 不纠结于烦恼 不树立使我夜不能寐的敌人 这就是我在这社会的生活态度
Follow Me公告
This is my Blog