CSS-宽高等比例自适应矩形

发表于 分类于

前言

有一天看某个开源项目的时候，有一个疑惑就是怎么实现一个响应式的正方形，即将宽度设为百分比，然后高度与宽度始终保持相同，上网查到了相应的方法。

解决

原理：padding 和 margin 都是相对于父元素的宽度来计算的

因此就有了下面的代码：

1
<div class="scale"></div>
1
2
3
4
5
.scale {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}

关键点就是height: 0;和padding-bottom: 50%;

有子元素的情况

如果元素中包含子元素的话，那么仅仅是上面的CSS部分是不够的，因为 height 是 0，子元素设置的高度会撑开父元素的高度，就像下面的代码这样，scale 会变成一个宽高比1比2的盒子。

1
2
3
4
5
<div class="scale">
  <div class="item">
    这里是所有子元素的容器
  </div>
 </div>
1
2
3
4
5
6
7
8
9
10
11
.scale {
  width: 100%;
  padding-bottom: 100%;
  height: 0;
}

.item {
  width: 100%;
  height: 100%;
  background-color: aquamarine;
}

因此css需要改成下面这样，加上position。

1
2
3
4
5
6
7
8
9
10
11
12
13
.scale {
  width: 100%;
  padding-bottom: 100%;
  height: 0;
  position: relative;
}

.item {
  width: 100%;
  height: 100%;
  background-color: aquamarine;
  position: absolute;
}

应用

在html-tags项目中有相应的应用