原因
过年带薪休假,无事。不如搞点货色。而后发现了本人一个陈年老我的项目 vue-keep-ratio,一个用来固定某些 DOM 元素宽高比的小组件。
之前的实现形式比拟蠢,通过监听浏览器甚至 DOM 的大小变动事件,来调整对应 DOM 的大小,这个实现我始终都是不太喜爱的,然而过后又要急用到,就先这样了。
最近看到 CSS 有新出一个属性 aspect-ratio,能够用作固定指定 DOM 长宽比,十分欣慰,但一看反对度,说不泄气是假的:
在等大部分浏览器兼容的这段时间中,咱们须要想一些更通用的代替方法。于是基于我之前的一个记录 一种兼容所有浏览器的固定宽高百分比实现,而后决定重做这个组件。
实现
其实也没啥了,能够去这里看看成果 Codepen 固定长宽比 Demo
如果想看代码,你只须要看这里 VueKeepRatio.js – Github,总共就 68 行。
再持续欠缺吧,如果有破绽或者有余,欢送大佬指教????