CSS宽度(%)和高度(px)和相同长度

Question

我尝试做的是方形,随着屏幕的大小改变大小.

所以我将宽度设置为25%.如何确保高度与px的宽度保持相同的宽度？

提前致谢.

Answer 1

您可以使用padding百分比的top/bottom 属性来实现结果.

这里的例子.

.box {
    width: 25%;
    padding-bottom: 25%;
}

甲百分比值上顶部/底部padding或margins相对于框的包含块的宽度.

8.4填充属性:'padding-top','padding-right','padding-bottom','padding-left'和'padding'

<percentage> 百分比是根据生成的框的包含块的宽度计算的,即使对于"填充顶部"和"填充底部"也是如此.

添加内容

由于箱的高度增长,加入的内容,我们可以换用元素含量.wrapper和立场,绝对相对框,然后使用top,right,left和bottom属性,以填补框的整个空间.

这里的例子

<div class="box">
  <div class="wrapper">
    <!-- content goes here... -->
  </div>
</div>

.box {
  width: 25%;
  position: relative;
}

.box:after {
  content: "";
  display: block;
  padding-top: 100%; /*  1:1 square */
}

.box > .wrapper {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

有关详细信息,请参阅此处的答案 (响应式容器部分).