object-fit
发表于|更新于
|浏览量:
能轻易做到别人感觉困难的事是人才；能轻易做到别人所不能做的工作是天才。——西德尼
讲一个小技巧，对于图片裁剪可以用这个属性：object-fit
object-fit 是一个 CSS 属性，用于指定替换元素（如 <img> 和 <video>）内容的尺寸如何适应其容器。它定义了内容如何填充容器的大小，以及是否保持内容的比例
例如：
1 | <div style="width: 400px; height: 400px; overflow: hidden;"> |
相关推荐
2023-08-25
js阻止默认事件踩坑
人这种卑鄙的东西，什么都会习惯的。——陀思妥耶夫斯基《罪与罚》 今天遇到一个问题，我想阻止浏览器默认的滚动事件，却阻止不了还一直报错 123456789101112131415161718192021<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div style="height: 2000px;background:#888"> </div> <script> document.addEventL...
2025-02-04
yjs
她说好想我。这在我局狭的一片草地上，可是一大把阳光，心底暖洋洋的。——送花的人走了 https://github.com/yjs/yjs https://github.com/yjs/yjs 在构建实时协作应用时，我发现了一个非常强大的开源库——Yjs。它是一个高效、模块化的 CRDT（Conflict-free Replicated Data Type） 实现，专注于实现实时协作功能。Yjs 能够同步不同客户端的共享数据状态，即使在网络断开或冲突的情况下，所有更改都可以无缝合并，类似于 Google Docs 这样的多人协作体验。 什么是 Yjs？Yjs 是一个基于 JavaScript 的实时协作引擎，支持在多个客户端之间共享数据同步。它通过 CRDT 技术来处理并发更新和冲突，使得用户在离线或网络不稳定的情况下依然可以正常操作，待网络恢复后自动完成数据同步。 Yjs 具有极高的性能优化和扩展性，可以集成到各种应用场景中，例如实时文本编辑器、协作画板、表单、项目管理工具等。 Yjs 的核心功能 实时协作支持多用户同时编辑共享数据。无论是文档、列表、地图还是自定义数据结...
2021-06-27
before和after选择器
在科学上没有平坦的大道，只有不畏劳苦，沿着陡峭山路攀登的人，才有希望达到光辉的顶点——马克思 我们可以使用::before和::after去选择我们节点内部的首项或尾项 例如我这里代码如下 123456789101112131415161718192021222324252627282930313233343536<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .ruben-parent { width: 100%; border: 0.1em solid #ababab; text-align: center; } .ruben-parent::before, .ruben-parent::after { margin: 0 auto; content: ''; ...
2024-11-10
typescript-exercises（十五）
人的一辈子都在高潮—低潮中浮沉，唯有庸碌的人，生活才如死水一般。——傅雷 问题： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051/*Intro: Our attempt to Open Source didn't work quite as expected. It turned out there were already many existing functional JS libraries. All the remaining developers left the company as well. It seems that they are joining a very ambitious startup which re-invented a juicer and raised millions of dollars. Too bad we cannot compe...
2021-07-16
uniapp打电话
人不可能阻止指甲生长….同样的，人也不能压抑自己与生俱来的冲动！——吉良吉影 代码如下 123uni.makePhoneCall({ phoneNumber: '114' //仅为示例}); 同样拥有成功、失败和完成的回调 123456uni.makePhoneCall({ phoneNumber: '114' //仅为示例 ,success:res=>{ console.log(res); } ,fail:res=>{ console.log(res); } ,complete:res=>{ console.log(res); }});
2021-11-23
export default和module.exports
我期望理解，但是也慢慢地感受到了一种责任，给予比接受伟大，去爱比被爱伟大。 ——海明威 我们在vue项目中创建两个js 在util.js中写入 123export default { ruben: 'ruben'} 在api.js中写入 123module.exports = { vampire: 'vampire'} 我们再来一个页面中使用两种方式引用 123456789101112131415<script>import util from '@/common/util.js';import api from '@/common/api.js'const util1 = require('@/common/util.js')const api1 = require('@/common/api.js')export default{ created(){ co...
阿超
我的名字叫阿超 年龄25岁 家在北京市 职业是软件开发 每天最晚也会在八点前回家 不抽烟 酒浅尝辄止 晚上十二点上床 保证睡足八个小时 睡前写一篇博客 再做二十分钟俯卧撑暖身 然后再睡觉 基本能熟睡到天亮 像婴儿一样不留下任何疲劳和压力 就这样迎来第二天的早晨 健康检查结果也显示我很正常 我想说明我是一个不论何时都追求内心平稳的人 不拘泥于胜负 不纠结于烦恼 不树立使我夜不能寐的敌人 这就是我在这社会的生活态度
Follow Me公告
This is my Blog