纯css如何在宽高不确定的父元素内实现正方形

Question

研究正方形样式时想到的问题，就是父元素是一个可resize的block，如何能让正方形子元素边长等于父元素短的一边的百分比长度？不依赖JS如何实现？

Answer 1

padding 的百分比数值是相对父元素宽度的宽度计算的。所以只需将元素垂直方向的一个 padding 值设定为与 width 相同的百分比就可以制作出自适应正方形了：

<div class="main"></div>

.main{
  width: 100%;
  padding-bottom: 100%;
  background:red;
}

jsfiddle

Answer 2

from: http://stackoverflow.com/ques...
基本上就是用一个图片把div撑起来，就像下面这样

<div>
  <div></div>
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
</div>

html, body {
  margin: 0px;
  padding: 0px;
}
div {
  position: fixed;
  width: 200px; /* 改这个就可以看到效果了 */
}
div > div {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;      
  border:1px solid black;
}
img {
  width: 100%;
  display: block;      
  position: relative;
}