aspect-ratio

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

|浏览量:

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

分享一个css属性aspect-ratio

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

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

相关推荐

我们的事业就是学习再学习，努力积累更多的知识，因为有了知识，社会就会有长足的进步，人类的未来幸福就在于此。——契诃夫 Ever Gauzy：让企业管理在同一平台上协同运转项目地址：https://github.com/ever-co/ever-gauzy 企业管理往往像一场不断延展的接力：人力资源在维护员工信息，销售团队追踪客户与商机，项目成员拆解任务、记录工时，财务人员处理账单、发票、收入与支出，管理者则希望从仪表盘里看见组织运行的轮廓。 Ever Gauzy 是一个开源业务管理平台，面向协作型、按需型与共享经济场景。它将 ERP、CRM、HRM、ATS、项目管理，以及员工时间、活动和生产力跟踪等能力汇集到同一个平台中，让原本分散在不同业务环节中的信息与流程，拥有一个共同的工作空间。它不是只关注某一个部门的独立工具，而是试图覆盖组织从人员、客户、项目到财务、库存与分析的多条业务线。每一项能力都像平台中的一个角色，在各自的位置上承担职责，也与其他模块共同推动企业日常工作的节奏。一个平台，连接企业管理的多个现场Ever Gauzy 的定位很清晰：它是一套开放的业务管理平台。...

vue中props中值未监听

每段记忆都是零碎的，犹如残破的蛛丝，无声无息的藏在黑暗的角落里——桐华我今天简短测试了一下：编写一个组件，给它设置一个props属性user 这里给它一个默认值{ age: 21 } 12345678910111213141516<template> <div> <slot :user="user">默认内容</slot> </div></template><script>export default { props: { user: { type: Object, default: () => ({ age: 21 }) } }};</script> 然后我们在外部引用该组件并传入该props 编写一个方法来改变当前userInfo的值 123456789101112131415161718192021222324252627282930<templ...

css直接引用svg代码

一切安乐，无不来自困苦。——《我是猫》有些时候我们想直接引入一个svg图标，又不想创建svg文件，或者编写svg代码到html中，想直接在css中引入可以转码+加前缀直接引用，这是一段svg代码 123456789101112<svg viewBox='0 0 161 161' xmlns='http://www.w3.org/2000/svg'> <filter id='noiseFilter'> <feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/> </filter> <rect width='100%'...

这是一个流行离开的世界，但是我们都不擅长告别。——《生活在别处》今天分享一个fabric photo，它是一个基于 canvas 的纯前端的图片编辑器，支持方形，圆形，箭头，缩放，拖拽，鹰眼，马赛克，涂鸦，线条，导出 png，剪切等 github地址：https://github.com/ximing/fabric-photo 在线体验Demo：https://ximing.github.io/fabric-photo/ 找了很多个，这个应该是很好用的了并且协议为MIT，支持商用

overflow和动态计算高度

人们总会找到某种带头人,把他供奉起来,培养成伟人……暴君就是这么来的;暴君最初都是以保护者的形象出现的。——柏拉图,《理想国》首先是MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow 其中对overflow进行了描述： CSS 属性 overflow 定义当一个元素的内容太大而无法适应块级格式化上下文时候该做什么。它是 overflow-x 和overflow-y的简写属性。重点在这里：为使 overflow 有效果，块级容器必须有一个指定的高度（height或者max-height）或者将white-space设置为nowrap。那问题来了，我这里有一个折叠面板我希望这里多个折叠面板每一项的头部都能显示在页面中，并且其子项能够适应屏幕高度和折叠情况变化为了实现上面的效果，我们需要在每一个折叠面板子项中设置overflow-y:auto，然后给其设置height或者max-height 我们知道css中有个计算函数calc可以计算我们的高度，这里的卡片为了保证屏幕自适应，可...

天下之事不难于立法，而难于法之必行。一一明·张居正 EdgeOne Pages：腾讯云推出的现代前端开发与部署新体验在现代 Web 开发持续演进的大潮中，开发者对前端托管、性能优化、无服务器化和全球加速的需求日益提升。腾讯云基于其强大的 EdgeOne 边缘计算基础设施，推出了面向开发者的全新前端平台——EdgeOne Pages，为构建、部署和加速静态站点及无服务器应用带来极致体验。一、什么是 EdgeOne Pages？EdgeOne Pages 是一站式前端开发与部署平台，专为现代 Web 项目量身定做。它不仅支持静态页面的极速托管，还内置边缘 Serverless 能力，让你用 JavaScript 直接在全球边缘节点编写动态服务，无需管理服务器或基础设施，轻松实现低延迟、全球可用的前后端一体化应用。二、核心产品优势1. 全球加速，极致性能依托腾讯云分布全球的边缘节点，EdgeOne Pages 能将静态资源自动缓存到离用户最近的位置，大幅提升页面打开速度和访问体验。无论访客来自国内外，网站都能保持高可用和低延时。 2. 极简部署，自动化上线集成高效的自动...

阿超

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

数据加载中