css: aspect-ratio 让元素的宽高比例缩放

html-css018

css: aspect-ratio 让元素的宽高比例缩放,第1张

css设置div宽高按照10/1显示,无论这个div的宽怎么变化,div的高都会是宽的十分之一,这就是 aspect-ratio 的作用,例如下面这个例子

假如说div的内容已经高于div显示的高度,那么div会根据内容的高度来显示,也就是说最小高度是宽度的十分之一,最高的就是按照内容的高度走

假如说就想跟着比例走,即使内容超出比例的高度,那该怎么做呢?很简单,加上 min-height:0 就可以了,这样就可以让高度不根据内容计算了,而是固定的数值

如果我们同时设置width和height,则aspect-ratio就不起作用了,就完全按照width和height设置的值显示

假如我们设置了最大的宽度时300px,因为是块状元素,宽度是展开一行的,并且高度是按照比例走的,那么高度就是30px

假如我们在标签上用width或者height属性, aspect-ratio 的优先级也是低的,例如:

最后结果还是按照标签属性上的width和height显示宽高,而不是 aspect-ratio 设置的1/1比例

综上所述, aspect-ratio 的优先级是最低的,不过确实好用

比如,建立4个div,要实现宽度随窗口变化而变化很简单,把宽度设成百分比形式就可以了。

css这样写:

这样的话我们的div倒是可以随着窗口的变化进行宽度的缩放,但是高度是不变的,这样肯定不行,我们要达到按比例缩放的话高度肯定也是要写成百分比的。那么怎么写呢?直接写百分比么 height:21%这个就别想了,肯定不行的。

我们可以借用一个不常见的属性,padding-bottom属性。

从手册可以看到,当padding-bottom为百分比的值时,定义的是基于父元素宽度的百分比下内边距。

所以我们的css如果这样写:

我们就会得到一个和我们宽度相等的高度,而且我们的div会随着窗口大小的改变进行等比例的缩放。

但是这个方法有一个问题就是,手册上说我们用的padding-bottom的这个值

感觉像是个雷啊

今天就先到这里,感兴趣的小伙伴可以一起探讨探讨。