最近在做产品有类似下图这么一个需求,容器块需要保持宽高比一致,且当屏幕宽度发生变化时,容器块可以适度按比例缩放。
pic

这里难点在「适度」上,也就是说要设置容器块的 min-width 以及 max-width。比方说,max-width: calc(100% - 10px),怎么才能保证在这种情况下高度也是与宽度保持比例的?不然的话,直接上 em 或者 rem 就可以了,不用这么大费周章。

由于我本来是有全局监听视口宽度变化的,还加上了节流器 throttle,能够触发全局事件,让监听了该事件的页面都能接收到通知。一开始就想利用这个便利来通过 js 来动态地保证宽度在一定范围内变化时,高度还能与之保持一定的比例。但是这时会引发效率问题的,如果 N 个 item 块都要同时修改样式,必定会引发重排与重绘,非常占用页面性能。

那到底有没有办法来用纯 css 来保证 item 块的宽高一直保持着固定比例呢?
有的!

神奇的 paddingoverflow

padding 有一个很神奇的属性,那就是当给它赋值为百分比的时候,它是以容器宽度 width 为参照的。

另外,在计算 overflow 时,是将容器内容区域(即 widthheight 对应的区域)加上 padding 区域一起计算的。
也就是换句话说,即使将容器的 overflow 设置为 hidden,溢出到 padding 区域的内容也会照常显示的。

所以,假设 item 块的宽高比例需要固定保持为 4:3,则可以如下实现:

1
2
3
4
5
6
7
8
9
10
11
/* 假设通过 js 实现了根元素 font-size 的响应式变化
且视口为 750px 宽度下时为 100px
*/
.wrapper {
width: 1.7rem;
}
.item {
width: 100%;
height: 0;
padding-bottom: calc(100% / (4/3));
}