您的位置：首页 > Web前端 > CSS

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

2018-01-25 13:58 816 查看 
方法1
在保持元素宽高比恒定的情况下，要使得元素可以和父元素同比缩放。此时会用到 [code]padding
。

需要知道的是：一个元素的 
padding
，如果值是一个百分比，那这个百分比是相对于其父元素的宽度而言的，
padding-bottom
也是如此。

使用 
padding-bottom
来代替 
height
来实现高度与宽度成比例的效果，将 
padding-bottom
设置为想要实现的 
height
的值。同时将其 
height
设置为 0 以使元素的“高度”等于 
padding-bottom
的值，从而实现需要的效果。

此时CSS代码如下：

div {
float: left;
margin: 10px 5%;
padding-bottom: 20%;
width: 20%;
height: 0;
}


[/code]
方法2

####### 用vh单位

html:


[code]<!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;
}



内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航