简介

我们时常在开发的时候,需要将某个元素固定宽高比。原生 CSS 又几乎无法实现这个功能(最新的 CSS 属性支持了 aspect-ratio)。

期望有一个兼容的、可靠的、性能不错的实现方案。

发现

我们发现图片或者 svg 中的 widthheight,单独更改其中的某一项,另一项也会自动变化,且是可以等比缩放的。

实现

基于此,我们就可以在我们的元素后,叠加一个 svg 或者图片,然后便能实现同等的等比缩放效果。

1
2
3
4
5
6
<div style="width: 123px;">
<div style="position: relative;display: inline-block;width: 100%;">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'%3E%3C/svg%3E" style="border: none;width: 100%;">
<div style="position: absolute;top: 0;left: 0;width: 100%;background: lightblue;height: 100%;">固定比例的元素 yeah</div>
</div>
</div>

由于 image 不太方便调整其比例,所以,我选用了 svg 来做这个功能。

除了设置比例的时候需要用到 JS,后续的变化都只会用到 CSS,并且相比监听事件纯 JS 的实现,性能也不错。

vue-keep-ratio

基于此,实现了一个 vue 的组件

https://github.com/AielloChan/vue-keep-ratio