Question

我尝试制作的是方形，可以根据屏幕大小改变大小。

所以我将宽度设置为25％。如何确保高度在px中与宽度保持相同的长度？

提前致谢。

Answer 1

您可以使用百分比的顶部/底部padding属性来实现结果。

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

顶部/底部padding或margins上的percentage value相对于包含框的框的宽度。

<强> 8.4 Padding properties: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', and 'padding'

<percentage>    百分比是根据宽度计算的   生成的框包含块，即使对于填充顶部＆＃39;和   ＆＃39;填充底＆＃39;

添加内容

由于通过添加内容来增加框的高度，我们可以用元素.wrapper包装内容并将其绝对相对于框定位，然后使用top，{{1} }，right和left属性用于填充框的整个空间。

<强> Example Here

bottom

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

有关详细信息，请参阅my answer here （自适应容器部分）。

Answer 2

您可以将宽度值设置为百分比，然后使用jquery抓取它，然后将其设置为高度值。看到这个

var box = $(".box");
var width = box.css("width");
box.css("height", width);

http://jsfiddle.net/DPYcg/1/

Answer 3

为了能够添加内容，您可以使用伪元素和浮动行为：http://codepen.io/anon/pen/fklAr/

div {
  width:25%;
  background:red;
  margin:auto;
}
div:before, div:after {
  content:'';
}
div:before {
  float:left;
  padding-top:100%;
}
div:after {
  display:block;
  clear:both;
}

如果您想要将内容集中在一起，可能会重复：Center content in the middle of div container

CSS宽度（％）和高度（px）和相同长度

3 个答案:

添加内容