css实现高度height随宽度width变化保持比例不变

方法1

在保持元素宽高比恒定的情况下,要使得元素可以和父元素同比缩放。此时会用到 padding。
需要知道的是:一个元素的 padding,如果值是一个百分比,那这个百分比是相对于其父元素的宽度而言的,padding-bottom 也是如此。
使用 padding-bottom 来代替 height 来实现高度与宽度成比例的效果,将 padding-bottom 设置为想要实现的 height 的值。同时将其 height 设置为 0 以使元素的“高度”等于 padding-bottom 的值,从而实现需要的效果。
此时CSS代码如下:

div {
  padding-bottom: 20%;
  height: 0;
}

方法2

用vh单位
html

<!DOCTYPE html>
<html><head> 
<meta charset="utf-8"> 
<title>JS Bin</title>
</head>
<body>
<div class="ui-square-nerd"></div> 
<div class="ui-square"></div>
</body>
</html>

css

.ui-square-nerd {  
width: 20%;  
height: 0;  
padding-bottom: 20%; 
background: blue;
} 

.ui-square {  
margin-top: 30px;  
width: 20vh;  
height: 20vh;  
background: green;
}

给TA打赏
共{{data.count}}人
人已打赏
思路吐槽计算机基础

在CSS中创建磨砂玻璃效果的两种方法

2020-12-18 22:36:16

程序代码计算机基础

用FUSE编写文件系统(1)

2020-12-18 22:37:49

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索