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

最新推荐文章于 2024-07-29 18:03:30 发布

北方的刀郎

最新推荐文章于 2024-07-29 18:03:30 发布

阅读量2.5w

点赞数 4

分类专栏： html div css

html div css 专栏收录该内容

123 篇文章 3 订阅

订阅专栏

 
 
  
  方法1
  
  在保持元素宽高比恒定的情况下，要使得元素可以和父元素同比缩放。此时会用到 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;
}

方法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;
}