aspect-ratio

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

|浏览量:

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

分享一个css属性aspect-ratio

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

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

相关推荐

image-conversion

失之毫厘，差之千里。——佚名分享一个js图像库： https://github.com/WangYuLue/image-conversion Install12345npm i image-conversion --save# or yarn add image-conversion Include the libraryin browser: 1<script src="https://cdn.jsdelivr.net/gh/WangYuLue/image-conversion/build/conversion.js"></script> in CommonJS: 1const imageConversion = require("image-conversion"); in ES6: 1import * as imageConversion from 'image-conversion'; or 1import {compress, compressAccurat...

vuepress2一次性获取所有frontmatter

上帝是孤独的，恶魔却总在拉帮结伙。——梭罗的《瓦尔登湖》。接上文： vuepress获取所有页面frontmatter 这次是vuepressv2.0.0-beta.66 首页 | VuePress 核心代码： 12345678910// .vuepress/getAllFrontmatter.smodule.exports = { name: 'get-all-frontmatter', extendsPage: (page, app) => { console.log({ page, app }) console.log(page.data.frontmatter) app.siteData.frontmatter = app.siteData.frontmatter ?? [] app.siteData.frontmatter.push(page.data.frontmatter) },}; 然后配置： 123456789101112131415// ...

我荒废了时间，时间便把我荒废了。——莎士比亚 https://github.com/gitalk/gitalk https://gitalk.github.io/ 用 Gitalk 给博客添加评论系统：优雅、开源、无后端依赖在搭建个人博客时，我们经常面临一个小难题：评论系统用什么好？传统方案如 Disqus 虽然功能强大，但加载慢、隐私问题多；国内的评论系统则可能存在稳定性和接入成本。于是我选择了一个更极客、更自由的方式：Gitalk —— 一个基于 GitHub Issues 的评论系统。什么是 Gitalk？Gitalk 是一个利用 GitHub Issues 构建的评论系统，由 gitalk 开发者团队创建。它的设计理念很简单：既然每个人都有 GitHub 账号，为什么不能用 GitHub 直接发评论？它通过 GitHub 的 OAuth 授权，允许访问者在你指定的仓库中创建/回复 issue，从而完成评论功能。 Gitalk 的优点 ✅ 完全免费，只依赖 GitHub，无需后端服务器 ✅ 界面简洁，支持 Markdown、高亮、表情 ...

穷且益坚，不坠青云之志。——王勃分享一个最近开发中使用的前端UI组件库：uView 它里面的组件基本都是拿来即用按照官方文档进行安装、配置即可

byte二维码在img中展示

睡在哪里都是睡在黑夜里。——贾平凹《废都》我们使用hutool的工具类生成二维码图片后，如果转为byte数组，返还给前端，我们要放入img中显示 12345@GetMapping("generateCode")@ResponseBodypublic byte[] generateCode() { return QrCodeUtil.generatePng("https://VampireAchao.github.io/", QrConfig.create().setImg(ImgUtil.getImage(URLUtil.url("/img/oss/2020-06-01/head.jpg"))));} 直接放到src是不行的，需要在前面加一个data:image/jpeg;base64, 最终变成这样效果图：

变量解构赋值

既然有时间在最后壮烈牺牲，不如完美地活到最后一刻——坂田银时/银魂前两天有朋友问我，这个写法看不懂，让我给他讲讲它这里用到了一个ES6的新特性：解构赋值这里简单复现一下 123456789var param = { columns: { property: "我是property" }, data: ["我是", "data", "数组"]}var {columns,data} = paramconsole.log(columns)console.log(data) 输出结果可以看到我们这里使用 1var {columns,data} = param 去拿到了param里的变量columns和data 这里注意一点，如果我们使用的名字不同的话，是无法取得里面的属性的例如 123456789var param = { columns: { property: "...

阿超

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

数据加载中