当前位置：网站首页 > 技术文章 > 正文

一个简单的CSS属性助你实现页面的等比例缩放，快来学习一下吧

myzbx 2024-12-02 22:39 20 浏览

前言

在响应式布局逐渐成为主流的今天，网页或者app的流式布局已经不算是一个新鲜的词汇了。今天我要讲的一个内容也是跟页面流式布局有关，如何让你的网页实现完美的缩放？

网页布局

我们可以很快速的写出一个响应式布局的页面，首先看一下效果图。

网页布局

其中html部分的代码如下：

html部分代码

css中的item代码为：

css代码

通过以上代码，完成上述的流式布局后，在我们改变浏览器窗口大小时，div也会随之进行缩放。

问题

But，你以为这就是我们想要的结果吗？

当然不是！在改变浏览器窗口大小时，我们发现虽然div的宽度是进行了缩放，但是高度却没变，因此div的宽高比并未保持原始比例，我们可以看下以下的效果。

缩放后宽高比

从上图中可以很容易看出，缩放后的div宽高比比之前小很多，这并不是我们想要的结果。

我们需要达到的效果是在改变浏览器窗口大小时，div也会随之进行等比例的缩放。

实现办法

首先，可以使用Javascript代码去实现，这是没有问题的。但是绑定Javascript的onresize事件，在拖拽时可能会出卡顿现象，体验不是很好。

接下来我们通过CSS来实现以上的效果。

使用的核心属性是我们平时并不太注意的padding-bottom。

padding-bottom有一个很容易让人忽略的特性是，当取值为百分比形式时，其百分比的基数是父元素的宽度，而不是高度。

因此我们可以在不用给父元素设置高度的时候，就可以通过padding-bottom属性确定当前元素的高度。我们的做法如下。

将元素的height属性设为0，通过padding-bottom属性确定元素高度。
设置合理的padding-bottom值，例如上述的例子中，在宽度为21%时，如果需要高度是宽度的1.62倍，我们可以将padding-bottom取值为34%

修改后的CSS代码如下。

修改后的CSS

修改后，我们再次调整浏览器窗口的大小，就会发现div是等比例的进行缩放，完美达到了我们的要求。

修改后等比例缩放

疑问

在这里，可能会有人有疑问如果设置overflow:hidden;那么里面的文字会不会因为超过height，就会被隐藏了？

答案是不会的，根据CSS2.1的规范，overflow只会对处于padding外面的内容生效，即只有超出了 padding区域的内容才会被overflow属性隐藏掉。而在设置padding-bottom后，实际已经决定了元素的height属性，因此overflow:hidden;不会生效。

总结

今天这篇文章主要讲解了利用CSS完成页面等比例缩放的最简单方式，你学会了吗？

HTML 属性

上一篇：DOM 操作之属性操作
下一篇：每个前端开发需要了解的15个强大的CSS属性

一个简单的CSS属性助你实现页面的等比例缩放，快来学习一下吧

前言

网页布局

问题

实现办法

疑问

总结

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

用上Vue3，你真的变了吗?（vue3 key）

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

这么牛逼的cursor功能，赶紧用起来

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

20个免费音乐音效下载网站，无版权素材商业影片也可用

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331

谷歌SEO:外贸电商网站On-page SEO优化实战「附案例」