aspect-ratio

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

|浏览量:

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

分享一个css属性aspect-ratio

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

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

相关推荐

unicloud简单入门

凡人生之生也，必以其欢，忧则失纪，怒则失端，忧悲喜怒道乃无处。爱欲静之，遇乱正之，勿引勿摧，福将自归。——管仲简单来说，uniCloud可以用js搞定后端逻辑，之前后端做的事情，全部使用js编写，上传到云空间供客户端调用那我们写一个简单的云函数吧首先创建项目勾选启用uniCloud然后点创建右键uniCloud点击关联云服务空间或项目然后登录并创建服务空间创建完成后我们再次点击关联这时候我们新建一个云函数右键cloudfunctions点击新建云函数输入函数名稍作修改 1234'use strict';exports.main = async (event, context) => { return 'hello uniCloud'}; 右键我们新建的云函数，点击上传并运行可以看到控制台多了一个我们上传的云函数并且控制台也打印了返回结果我们在初始页面调用该函数 123456uniCloud.callFunction({ name: 'te...

css绘制三角形

青年时鲁莽，老年时悔恨——富兰克林代码如下： 123456789101112131415161718192021222324<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .triangle { width: 0; height: 0; border-...

awesome-phonenumber

天下之事不难于立法，而难于法之必行。一一明·张居正让电话号处理变得“Awesome”！深度体验 @grantila/awesome-phonenumber 的极简与高效在现代应用开发中，处理和验证电话号码是常见但却容易“踩坑”的细节：格式多样、地区差异、正则复杂、依赖臃肿……你是否也为此头疼？现在，有一个“轻量级神器”能让这一切变得极其简单和高效——@grantila/awesome-phonenumber！什么是 @grantila/awesome-phonenumber？它是一个基于 Google libphonenumber 的预编译版本，专为 Node.js 和前端环境设计，拥有更简洁的接口、极小的体积、无依赖，并且支持 TypeScript。简而言之，它就是你能在 npmjs 上找到的最小巧实用的 libphonenumber 封装库！主要特色超小体积，无依赖：极大节省你的项目空间，运行速度快，加载迅速。 API简洁易用：新版 API 更加清晰，无需复杂构造或函数调用，错误处理也更友好（不抛异常）。 TypeScript ...

忍把浮名，换了浅斟低唱。——柳永《鹤冲天》分享一个css框架unocss 可以通过class规则，生成对应样式，例如通过m-1生成margin: 0.25rem 而且规则可以通过 https://uno.antfu.me/ 进行查询除了预制规则，还可以自定义规则： 123rules: [ ['m-1', { margin: '0.25rem' }],] 即可生成 1.m-1 { margin: 0.25rem; } 还可以通过正则的方式 1234rules: [ [/^m-(\d+)$/, ([, d]) => ({ margin: `${d / 4}rem` })], [/^p-(\d+)$/, match => ({ padding: `${match[1] / 4}rem` })],] 使用起来 123456<div class="m-100"> &...

chrome浏览器插件开发快速入门

劝君正向光明面，心自安详气自盈。——佚名文档地址： Hello World 扩展程序 | Chrome Extensions | Chrome for Developers Hello World 扩展程序通过构建您的第一个 Hello World 扩展程序，了解 Chrome 扩展程序开发的基础知识。概览您将创建一个“Hello World”在本地加载扩展程序、查找日志并探索其他建议。 Hello World当用户点击扩展程序工具栏图标时，此扩展程序将显示“Hello Extensions”。 Hello Extension 弹出式窗口首先，创建一个用于存储扩展程序文件的新目录。如果您愿意，也可以下载 GitHub 中的源代码。接下来，在此目录中创建一个名为 manifest.json 的新文件。此 JSON 文件描述了扩展程序的功能和配置例如，大多数清单文件都包含 "action" 键，用于声明 Chrome 应用作扩展程序操作图标的图片，以及。 12345678910{ ...

github官方图标库

不存在十全十美的文章，如同不存在彻头彻尾的绝望。——村上春树 github官方图标库 https://primer.style/foundations/icons 代码仓库 https://github.com/primer/octicons

阿超

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

数据加载中