CSS：如何制作1：1的div，它是父母宽度或高度的100％，以较小者为准？

Question

这支笔可能最能解释我的问题：

http://codepen.io/anon/pen/xwQpLy?editors=110

我正在使用以下技巧将盒子限制在1：1的比例：

.squarebox {
  position: relative;
  width: 100%;
}
.squarebox::before {
  padding-bottom: 100%; 
  content: "";
  display: block;
}
.content {
  position: absolute; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0;
}

但是，我希望盒子总是填充父母的宽度或高度，以较小者为准。在上面的示例中，该框仅填充父级的宽度。

Answer 1

你的意思是这样的吗？： http://codepen.io/anon/pen/yYQpqp?editors=110

父级需要位置：相对，.content div需要为width：100％;高度：100％;以及位置：顶部，右侧，底部和左侧的相对设置为0。

我剥掉了方盒div。

.squarebox {
  position: relative;
  width: 100%;
}

.content {
  width:100%;
  height:100%;
  position: absolute; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0;
  background:orange;
}