响应方格div

Question

我希望有一个带有4个div的列，背景图像和100％的父宽度，并给出相同的高度来制作正方形。这就是我没有％：

我的HTML：

<div class="col-sm-3 slots" style="background-color: red;">
    <div class="slot"></div>
    <div class="slot"></div>
    <div class="slot"></div>
    <div class="slot"></div>
</div>

我的CSS以width和height为单位。

.slot {
    background-image: url("img/Inventory_slot_background.png");
    background-repeat: no-repeat;
    width: 68px;
    height: 68px;
}
.slots {
    padding: 0;
}

我想提供width: 100%;，然后提供height: width;

之类的内容

编辑：问题是，如果我使用padding-bottom: 100%;，如果我想放置文字或图片，背景图会展开并显示如下：

Answer 1

您可以使用伪元素：

＆＃13;

＆＃13;

.slot {
  box-shadow:inset 0 0 5px #C9A170;
  background:#EBE6C9;
  border:solid #78624A;
  overflow:hidden;
  padding:5px;
  margin:1em;
  }
.slot:before {
  content:'';
  float:left;
  padding:50% 0;
  }
body {
  margin:0;
  }

＆＃13;

<div class="col-sm-3 slots" style="background-color: red;">
    <div class="slot"> anything here</div>
    <div class="slot"> can grow taller than the initial square shape</div>
    <div class="slot"></div>
    <div class="slot"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我不明白你想要完成什么...如果你想让那些盒子根据他们的父div动态改变大小你需要javascript，不能用CSS。

Answer 3

您可以使用具有百分比的垂直填充：

.slots {
    width: 150px;
}
.slot {
    width: 100%;
    padding-bottom: 100%;
}

http://jsfiddle.net/26dhhune/