aspect-ratio

发表于2023-08-18|更新于2026-02-24

|浏览量:

物以稀为贵，情因老更慈。——白居易

分享一个css属性aspect-ratio

大家其实能看出来值2/1就是宽高比

这个属性在width和height只要有任意一个没有配的情况下就会生效，非常方便用于配置一些指定宽高比例的场景

相关推荐

原谅是容易的，忘却则是困难的。——普拉顿 React Explorer: 一个使用 React 和 Electron 的文件管理器项目简介React Explorer 是一个开源的文件管理器项目，使用 TypeScript、React 和 Blueprint 编写，并使用 Electron 打包。它提供了一个跨平台的文件管理解决方案，支持 Linux、macOS 和 Windows 系统。项目特点跨平台支持：React Explorer 可以在 Linux、macOS 和 Windows 系统上运行，为用户提供一致的文件管理体验。现代前端技术：项目使用 TypeScript 和 React 进行开发，确保代码的健壮性和可维护性。 Blueprint 组件库：使用 Blueprint 组件库构建用户界面，提供现代化的 UI 体验。 Electron 打包：通过 Electron 将应用打包成桌面应用，方便用户安装和使用。状态管理：使用 MobX 进行状态管理，确保应用状态的一致性和响应性。开源许可：项目采用 MIT 许可，允许用户自由使用和修改代码。项目主页项目主...

vuepress-theme-vdoing

要品味生活的浪漫，你得有点儿演员精神，必须像个旁观者，对自己的所作所为既超然事外又忘我投入。——毛姆《月亮和六便士》分享一个VuePress知识管理&博客主题官方文档：https://doc.xugaoyi.com/ github：https://github.com/xugaoyi/vuepress-theme-vdoing 提供多种主题模式看起来也很简洁，还有对应的广告位也有用来做博客的 mybatis-plus也用的该主题

颜色拾取器

志向是天才的幼苗，经过热爱劳动的双手培育，在肥田沃土里将成长为粗壮的大树。——苏霍姆林斯基官网：https://www.eyecon.ro/colorpicker/ 效果：代码： 1234567891011121314151617181920212223242526272829303132<head> <link media="screen" rel="stylesheet" href="admin/plugins/colorpicker/css/colorpicker.css" type="text/css"/></head><body><div> <div id="tag-color-picker"> <input type="text" id="tag-color-input')"/> </div...

数组扁平化flat

还保持着较为清醒的头脑，就决然不能把人生之船长期停泊在某个温暖的港湾。——路遥《早晨从中午开始》在前端开发中可能会有这样的需求：将一个数组中的数组拆分出来放到原数组中那么我们就可以使用flat函数 1[1,[2,3,[4,5,6,[7,8,9]]]].flat() flat中可以传入参数为数字，表示你要拆分数组的层数如果全部拆分，可以使用flat(Infinity) 1[1,[2,3,[4,5,6,[7,8,9]]]].flat(Infinity) 如果是较为复杂点的对象，则就只能使用map先取出来，再使用flat 1[{ruben:[1]},{ruben:[2,3]}].map(({ruben})=>ruben).flat()

requestFullscreen

每一次克制自己，就意味着比以前更强大。——高尔基 https://developer.mozilla.org/zh-CN/docs/Web/API/Element/requestFullscreen Element.requestFullscreen() 方法用于发出异步请求使元素进入全屏模式。比如我们全屏幕整个页面： 1document.documentElement.requestFullscreen(); 又或者我们为其封装一个切换全屏的函数 1234567function toggleFullScreen() { if (!document.fullscreenElement) { document.documentElement.requestFullscreen(); } else if (document.exitFullscreen) { document.exitFullscreen(); }} 甚至仅仅只是全屏某一元素，比如这里全屏一个video 1234567891011...

瀑布流组件vue-waterfall

坦白直率的言语，最容易打动悲哀的耳朵——莎士比亚分享一个vue瀑布流组件 vue-waterfall git地址：https://github.com/MopTym/vue-waterfall.git 竖向排列demo：http://app.moptym.com/vue-waterfall/demo/vertical-line.html 横向排列：http://app.moptym.com/vue-waterfall/demo/horizontal-line.html 竖向+变大：http://app.moptym.com/vue-waterfall/demo/vertical-line-with-grow.html

阿超

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

数据加载中