css 高度随宽度比例变化
【方案一:padding实现】
原理:
一个元素的 padding,如果值是一个百分比,那这个百分比是相对于其父元素的宽度而言的,padding-bottom 也是如此。
使用 padding-bottom 来代替 height 来实现高度与宽度成比例的效果,将 padding-bottom设置为想要实现的 height 的值。同时将
其 height 设置为 0 以使元素的“高度”等于 padding-bottom 的值,从而实现需要的效果。
<div class="father">
<div class="childbox"></div>
</div>
<style type="text/css">
.childbox{
padding-bottom: %;
width: %;
height: ;
background: #;
}
</style>
上例宽高比是1比1,实现的是正方形,并且根据父级盒子宽度实现等比缩放
【方案二:一个隐藏的图片来实现】
原理:
div容器如果不给定高度,它的高度会随着容器内部的元素变化而撑大,这个时候,我们在容器内部添加一张符合我们宽高比例的图片,给图片设置宽度100%;高度auto,我们知道图片只设置宽度的话,高度会随宽度来进行比例变化,自动缩放,这样我们内部的子容器的高度也就会按照比例缩放了。当然这个img你可以占位隐藏,也可以用别的盒子覆盖上。
#container {
width: %;
}
.attr {
background-color: #008b57;
}
.attr img{
width: %;
height: auto;
}
</style>
<div id='container'>
<div class='attr'>
<img src="1.png" alt="">
</div>
</div>
这个方法不需要考虑任何兼容性,PC移动完美运行。除了增加了一个dom结构,但是一个页面成百上千的代码来说,不值一提。
如果你觉得增加img标签多发了http请求,那么base64图片编码可以解决这个问题,由于我们的的图片只需要一个形状而已,所
以可以大胆的压缩,然后编码,连http请求都省了。
【方案三:vw,vh】
css3的新单位(css3大法好~),我们将父容器的宽度和高度定义为相同的vw,这样父容器的高度和宽度就是相同值,这个时候,子容器的宽高值设为百分比,不管父容器大小如何变,子容器的高度和宽度比都是不会变的
单位 说明
vw 相对于视窗的宽度
vh 相对于视窗的高度
vmin 相对于视口的宽度或高度中较小的那个被均分为100单位的vmin
vmax 相对于视口的宽度或高度中较大的那个被均分为100单位的vmax
<div class="father">
<div class="childbox"></div>
</div>
.childbox{
width: %;
height: 20vw;
background: #;
}
.
最新文章
- DarkTrack 4 Alien Version Released RAT 下载地址&;视频教程
- 【bzoj2648】 SJY摆棋子
- PDA通过SocketTcp+Json和SuperSocket通信方式
- html-----016---HTTP 状态消息
- extjs form 取值 赋值 重置
- Stage3D_Game_Programming:渲染3D模型
- ios 毛玻璃效果
- iis 10 ftp 被动模式配置
- Android OpenGL ES 入门系列(二) --- 环境搭建
- Django中url使用命名空间的错误
- 浙江省赛 C What Kind of Friends Are You?
- shell脚本-正则、grep、sed、awk
- vmware workstations下安装CentOS7
- deepin卸载mysql并安装设置mysql5.7
- dotnetcore-officeaddin-toolbox : Office 365 Add-in开发人员的工具箱
- Android Studio(IDEA)快速代码模版使用
- 在Ubuntu主机下实现与Windows虚拟机共享文件夹
- ES6-课程介绍
- 机器人编程挑战python
- CodeSmith生成SQL Server视图的实体类脚本/对应的生成模板
热门文章
- [LeetCode] 737. Sentence Similarity II 句子相似度之二
- [LeetCode] 505. The Maze II 迷宫之二
- [LeetCode] 230. Kth Smallest Element in a BST 二叉搜索树中的第K小的元素
- 基于Tendermint的区块链漂流瓶简单实现
- 【Struts】Struts框架配置详解
- Jenkins Pipeline 参数详解
- 用Autofac替换.net core 内置容器
- MySQL 5.7.26安装及配置--windows10系统下
- vertica 设置最大会话数
- 父组件调用子组件 viewChild