aspect-ratio
发表于|更新于
|浏览量:
物以稀为贵,情因老更慈。——白居易
分享一个css属性aspect-ratio

大家其实能看出来值2/1就是宽高比
这个属性在width和height只要有任意一个没有配的情况下就会生效,非常方便用于配置一些指定宽高比例的场景
相关推荐
2021-11-28
jquery根据属性选择
有信仰的人不会孤独。——阿列克谢耶维奇 分享一个jquery选择器的小技巧 我们可以通过自定义属性键值选中一个元素 例如如下元素: 1<div ruben="vampire">阿超</div> 然后我们通过ruben=vampire选中这个div 就可以如下写法: 1let vampire = $('div[ruben="vampire"]') 我们可以简单测试一下输出里面的内容 12345<div ruben="vampire">阿超</div><script type="text/javascript"> let vampire = $('div[ruben="vampire"]') console.log("vampire: ", vampire.text());</script> 效果
2024-01-14
chakra-ui
对人生命最大的威胁是以车代步,而不是交通事故。——怀特 分享一个很好看的react的UI组件库chakra-ui: https://chakra-ui.com/ https://github.com/chakra-ui/chakra-ui
2024-11-10
typescript-exercises(十五)
人的一辈子都在高潮—低潮中浮沉,唯有庸碌的人,生活才如死水一般。——傅雷 问题: 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051/*Intro: Our attempt to Open Source didn't work quite as expected. It turned out there were already many existing functional JS libraries. All the remaining developers left the company as well. It seems that they are joining a very ambitious startup which re-invented a juicer and raised millions of dollars. Too bad we cannot compe...
2021-10-29
nvue引入图标坑
强本而节用,则天不能贫。——荀况 今天把原来的vue页面改为nvue 发现之前的图标怎么都引不进去,搞了半天,后来通过debug发现,我引入的方式是使用添加对应的class给它加了个::before伪元素 知道了这个就很简单了,我们按照官方文档引入字体 首先我在App.vue中写入css代码: 123456/* 加载图标字体 - 条件编译模式 *//* #ifdef APP-PLUS-NVUE */.my-iconfont { font-family: myIconfont;}/* #endif */ 然后在对应的nvue页面中,在beforeCreate生命周期里调用addRule 123456789beforeCreate() { // #ifdef APP-PLUS-NVUE const domModule = uni.requireNativePlugin('dom'); domModule.addRule('fontFace', { fontFamily: 'myIcon...
2024-10-14
Apache-ShenYu动态扩缩容前端对接
能够隐藏自己的才能是一种很大的才能。——罗休夫柯 pr链接: https://github.com/apache/shenyu-dashboard/pull/489 see gif: 后端也包含了一个提交sql和优化代码的pr: [type:improve] Add dynamically scale admin page by VampireAchao · Pull Request #5706 · apache/shenyu · GitHub 菜单的: 12345INSERT INTO `resource` VALUES ('1844015648095666176', '1346776175553376256', 'SHENYU.MENU.SYSTEM.MANAGMENT.SCALE', '', '/system/scale', '', 1, 4, 'sliders', 0, 0, '', 1, ...
2023-02-24
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-...
