你不知道的CSS之等比例缩放的盒子，快来学习一下吧?
qiyuwang 2024-10-18 10:29 15 浏览 0 评论
前言
在响应式布局逐渐成为主流的今天，网页或者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完成页面等比例缩放的最简单方式，你学会了吗？
相关推荐
- centos7使用yum安装nginx+php7+mysql5.6
-
本文主要介绍安装在centos7下如何安装nginx+php+mysql的环境，centos7的版本自带安装源的版本无法实现PHP5.4以上的版本，数据库默认用的是mariadb，文章介绍的安装是如何...
- Linux基础入门(VMWare中CentOS7配置yum)
-
上一章节，介绍了《Linux基础入门（CentOS7下通过命令行配置网络）》，本章将介绍如何配置yum源，方便后续在学习和使用的过程中，对所需工具的安装；...
- CentOS 7搭建Nextcloud私有云（centos搭建云盘）
-
Nextcloud简介：对于私人网盘，其中最出名的就是seafile、owncloud和nextcloud。seafile是国人开发的，有免费和企业版，免费的功能有限；nextcloud是owncl...
- 分享一个docker镜像源地址，解决docker不能拉取的问题
-
自己搭建的代理，centos7只需要修改/etc/docker/daemon.json并输入以下内容：{"registry-mirrors":["https://next...
- 源支付5.18版全套开源源码客户端+云端+监控+协议三网免挂免输入
-
源支付5.18最新版协议去授权全套三端开源源码_客户端+云端+监控+协议三网免挂免输入（全套版）推荐系统为:CentOS7.6Linux系统环境:Nginx1.20.1+MySQL5.6....
- centos7飞速搭建zabbix5.0并添加windows、linux监控
-
一、环境zabbix所在服务器系统为centos7，监控的服务器为windows2016和centos7。二、安装zabbix官方安装帮助页面...
- CentOS上配置 Docker 使用代理服务器
-
hub.docker最近总被墙，国内大厂搞的docker镜像源代理被封被停，对于一个严重依赖一些海外项目的软件开发人员，简直没法干活了。docker要在CentOS上配置Docker使用代理服...
- CentOS 7 (阿里云虚拟机) 安装 Docker
-
一、安装Docker1.使用root权限登录CentOS。确保yum包更新到最新sudoyumupdate...
- Centos离线静默安装 oracle11g，步骤细验证成功
-
一、环境要求1.1.涉及工具及环境1)CentOS764位系统2)oracle安装包文件a)linux.x64_11gR2_database_1of2.zip...
- Linux运维之制作指定软件包的YUM源
-
#挑战30天在头条写日记#关注我，不迷路，大家好，我是大王。--记录运维中遇到的故障及排查方法...
- 在CentOS 9 安装Nvidia显卡驱动详细操作步骤
-
今天给粉丝网友演示CentOS9系统下如何安装nvidia显卡驱动。·将下载好的显卡驱动放到文件夹中，这里以download为例，放入文件夹中开始对系统软件升级，是为了防止在安装显卡驱动时显示报错...
- 基于Linux系统的本地Yum源搭建与配置(ISO方式、RPM方式)
-
前言：由于公司业务服务器大部分都在内网环境下运行，内网环境无法直接使用yum安装升级更新软件，所以需要自建Yum源来满足目前日常工作需要。...
- 最新zabbix一键安装脚本(基于centos8)
-
一、环境准备注意：操作系统必须是centos8及以上的，因为我配的安装源是centos8的。并且必须连接互联网，脚本是基于yum安装的！！！...
- CentOS7中使用yum安装Nginx的方法
-
1、添加源 默认情况Centos7中无Nginx的源，最近发现Nginx官网提供了Centos的源地址。因此可以如下执行命令添加源（...
- Centos8出现Failed to download metadata for repo 'AppStream'解决
-
大家都知道Centos8于2021年年底停止了服务，大家再在使用yum源安装时候，出现下面错误“错误：Failedtodownloadmetadataforrepo'AppStre...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- centos7使用yum安装nginx+php7+mysql5.6
- Linux基础入门(VMWare中CentOS7配置yum)
- CentOS 7搭建Nextcloud私有云（centos搭建云盘）
- 分享一个docker镜像源地址，解决docker不能拉取的问题
- 源支付5.18版全套开源源码客户端+云端+监控+协议三网免挂免输入
- centos7飞速搭建zabbix5.0并添加windows、linux监控
- CentOS上配置 Docker 使用代理服务器
- CentOS 7 (阿里云虚拟机) 安装 Docker
- Centos离线静默安装 oracle11g，步骤细验证成功
- Linux运维之制作指定软件包的YUM源
- 标签列表
-
- navicat无法连接mysql服务器 (65)
- 下横线怎么打 (71)
- flash插件怎么安装 (60)
- lol体验服怎么进 (66)
- ae插件怎么安装 (62)
- yum卸载 (75)
- .key文件 (63)
- cad一打开就致命错误是怎么回事 (61)
- rpm文件怎么安装 (66)
- linux取消挂载 (81)
- ie代理配置错误 (61)
- ajax error (67)
- centos7 重启网络 (67)
- centos6下载 (58)
- mysql 外网访问权限 (69)
- centos查看内核版本 (61)
- ps错误16 (66)
- nodejs读取json文件 (64)
- centos7 1810 (59)
- 加载com加载项时运行错误 (67)
- php打乱数组顺序 (68)
- cad安装失败怎么解决 (58)
- 因文件头错误而不能打开怎么解决 (68)
- js判断字符串为空 (62)
- centos查看端口 (64)