一、思考如何实现

这个问题类似于：我们在移动端页面，上面有一张宽度 100% 的图片，如果我们没设置高度，则图片会根据原有尺寸，等比缩放。

我们可以借助这个想法，根据元素高度，来为元素设置一个相应比例的高度即可。

二、实现方法1 - 通过 vw 视口单位实现

所谓视口单位(viewport units)是相对于视口(viewport)的尺寸而言，100vw 等于视口宽度的 100%，即 1vw 等于视口宽度的 1%。

我们就可以利用这个特性，实现移动端的宽高等比自适应容器。

为什么 .box 高度为 51.5vw 呢？

原因是图片原来的尺寸是 884 * 455的宽高比例，即 455 / 884 = 51.5%。

这个方法相比原来图片的等比缩放，有个优点：无论图片是否加载成功，容器高度始终是计算完成，不会造成页面抖动，也不会造成页面重绘，从而提升性能。

下面看看这种情况下，图片加载成功和失败的对比：

三、实现方法2 - 通过子元素 padding 实现

通过设置子元素的 padding 属性来实现，是比较常用，也是效果比较好的一种，这里需要理解的是：子元素的 padding 属性百分比的值是先对父容器的宽度而言。

这里看下面代码和效果图理解下：

分析：

这里我们将父容器 .box 宽度设置为 200px，子元素 .text 的 padding:10% ，因此 .box 的 padding 计算结果为 20px;

接下来结合主题，我们利用这个原理，来实现等比例的问题：

这里 .text 的 padding-bottom: 51.5%; 也是按照第一个方法，用图片原始尺寸的宽高比计算出来的，需要注意，这里将 .text 设置 height: 0; 会出现高度比实际高的问题，因此为了避免这个情况，就需要设置 height: 0;。

于是我们通过2种方法解决了这个问题。

hssfworkbook 设置自适应宽度_「CSS很简单」CSS 实现宽高等比自适应容器相关推荐

instanceof用法_「JS很简单」JavaScript 基础之 instanceof操作符
最近开始在整理ES6/ES7/ES8/ES9的知识点(已经上传到我的博客上),碰到一些知识点是自己已经忘记(用得少的知识点),于是也重新复习了一遍. 这篇文章要复习的 instanceof 是我在 ...
tkinter 设置不可编辑_「input不可编辑」input 不可编辑的方法 - seo实验室
input不可编辑 1.disabled 属性规定应该禁用 input 元素,被禁用的 input 元素,不可编辑,不可复制,不可选择,不能接收焦点,后台也不会接收到传值.设置后文字的颜色会变成灰色. ...
比「你很美」还好的 3 个字
比「你很美」还好的 3 个字,你们觉得呢 public static const ↓↓↓
qtabbar设置不同宽度_前端之css（宽高）设置小技巧
一.css宽高自适应: 1.宽度自适应: 元素宽度设为100%(块状元素的默认宽度为100%) 注:应用在通栏效果中 2.高度自适应: height:auto;或者不设置高度 3.最小,最大高度,最小 ...
单元格自适应宽度_最详细的Excel模块Openpyxl教程（二）-单元格操作详解
在以前的推文中,我们介绍了操作Excel的模块openpyxl的入门知识,相关推文可以从本公众号的底部相关菜单获取.接下来的推文我们来学习一下openpyxl这个python模块中的其他知识,本次推文 ...
自动点击器如何设置最快_「宝可梦大师」自动挂机刷本教学！我们不肝！安卓之自动点击器...
今天的文章是教安卓的大家如何自动挂机刷素材,刷书,刷一些简单的本. 不用那么耗费精力的看着,养肝护肾,多做运动,身体健康. 游戏使用来玩的不是让我们被玩的,我们看视频的应该游戏都下好开始玩了吧,大家应 ...
ipv4地址怎么设置手机_如何设置手机的IP地址?方法很简单赶快试试吧!
在公司.家里连接WIFI热点时移动设备多了,经常会出现无法连接的现象.出现这种现象的原因有很多,其中一种就是"IP冲突".今天小编就给大家演示一下,在手机上如何设置"静态 ...
citra 图形设置_「图形化编程」前导知识-数组(四)
在前三节的教程里, 暴王:「图形化编程」前导知识-数组(一)zhuanlan.zhihu.com 暴王:「图形化编程」前导知识-数组(二)zhuanlan.zhihu.com 暴王:「图形化编程」 ...
逆向查找_「函数说12」数据逆向查找很复杂？match+index让你轻松搞定
EXCEL进阶课堂 · 函数说持续更新,这是第12篇教程. 欢迎各位小伙伴转发.点赞.讨论,更欢迎私信获取练习素材,刻意练习才能学有收获. 第12讲:如何轻松的实现数据逆向查找--match+ind ...

hssfworkbook 设置自适应宽度_「CSS很简单」CSS 实现宽高等比自适应容器

一、思考如何实现

二、实现方法1 - 通过 vw 视口单位实现

hssfworkbook 设置自适应宽度_「CSS很简单」CSS 实现宽高等比自适应容器相关推荐

最新文章

热门文章