aspect-ratio
发表于|更新于
|浏览量:
物以稀为贵，情因老更慈。——白居易
分享一个css属性aspect-ratio
大家其实能看出来值2/1就是宽高比
这个属性在width和height只要有任意一个没有配的情况下就会生效，非常方便用于配置一些指定宽高比例的场景
相关推荐
2024-06-01
dialog标签
懂得兜圈子，绕道而行的人，往往是第一个登上山峰的人。——佚名 今天分享一个html标签dialog <dialog>：对话框元素 - HTML（超文本标记语言） | MDN 这是一个2022年新增的新标签 说白了就是一个弹框 简单示例： 123456<dialog open> <p>Greetings, one and all!</p> <form method="dialog"> <button>OK</button> </form></dialog> 我们可以对齐增加一个动画： 代码出处： Animating <dialog> 123456789101112131415161718192021222324<!-- Transition or Animate a <dialog> Modal Open + closed state Problem: The browser display:none;...
2024-10-06
vitesse-webext
知古不知今，谓之落沉。知今不知古，谓之盲瞽。——王充 分享一个由 Vite 提供支持的 WebExtension（Chrome、FireFox 等浏览器插件）的入门模板。 Github： https://github.com/antfu-collective/vitesse-webext 特性： ⚡️ Instant HMR - 在 dev 上使用 Vite（不再刷新！ 🥝 Vue 3 - 组合式 API、<script 设置> 语法等等！ 💬 轻松通信 - 由 webext-bridge 和 Vue使用存储提供支持 🌈 UnoCSS - 即时按需原子 CSS 引擎。 🦾 TypeScript - 类型安全 📦 组件自动导入 🌟 图标 - 直接从任何图标集中访问图标 🖥 内容脚本 - 即使在内容脚本中也可以使用 Vue 🌍 WebExtension - Chrome、Firefox 等的同构扩展 📃 具有完整类型支持的动态manifest.json 使用模板GitHub 模板Create a repo from this template o...
2021-09-28
vue中slot插槽
Be weird. Your strangeness is your magic. 我们在进行vue开发中，经常会使用到slot插槽 插槽允许我们在父组件引用子组件时，在组件其中放一段可以带标签的元素，甚至放入其他组件等 例如我这里定义一个组件 12345678910111213141516171819<template> <div> <header><slot name="header" :user="user">-------</slot></header> <main><slot :user="user">默认内容</slot></main> <footer><slot name="footer" :user="user">-------</slot></footer> </div><...
2022-04-23
drag事件
生活最沉重的负担不是工作，而是无聊。——罗曼·罗兰 首先是MDN：https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API 然后是代码： 123456789101112131415161718192021222324252627282930313233343536373839404142<!DOCTYPE html><html> <head> <style> .drop-container{ width: 200px; height: 200px; border: 1px solid red; background: #eee; } .drag-ball{ w...
2022-01-25
水波纹按钮动画
生活是种律动，须有光有影，有左有右，有晴有雨。——老舍 代码： 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .login { display: flex; align-items: center; justify-content: center; margin-top: 200px; } ...
2024-12-25
js录音并播放demo
伟大变为可笑只有一步，但再走一步，可笑又会变为伟大。——佩思 代码如下： 1
阿超
我的名字叫阿超 年龄25岁 家在北京市 职业是软件开发 每天最晚也会在八点前回家 不抽烟 酒浅尝辄止 晚上十二点上床 保证睡足八个小时 睡前写一篇博客 再做二十分钟俯卧撑暖身 然后再睡觉 基本能熟睡到天亮 像婴儿一样不留下任何疲劳和压力 就这样迎来第二天的早晨 健康检查结果也显示我很正常 我想说明我是一个不论何时都追求内心平稳的人 不拘泥于胜负 不纠结于烦恼 不树立使我夜不能寐的敌人 这就是我在这社会的生活态度
Follow Me公告
This is my Blog