Html 响应方格divs

我想有一个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>

我想给出

宽度：100%然后类似于高度：宽度

编辑：问题是如果我使用
填充底部：100%如果我想放置文本或图像，backgrund将展开，如下所示：

我不明白你想要实现什么。。。如果您想让这些框根据其父div动态更改大小，您需要javascript，但CSS不行。
您可以使用带有百分比的垂直填充：

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

您可以使用伪元素：


.slot{
盒影：插入0 0 5px#C9A170；
背景：#EBE6C9；
边框：实心#78624A；
溢出：隐藏；
填充物：5px；
边缘：1米；
}
.插槽：之前{
内容：''；
浮动：左；
填充：50%0；
}
身体{
保证金：0；
}

这里有什么吗
可以长得比最初的方形更高
Background属性：中心不帮助您。另外，如果您设置了宽度，则高度将自动指定。可能重复的是我尝试过的，但由于填充，我无法在其上放置任何内容，正如您在编辑中看到的那样。@Raxkin您可以使用内联块来帮助对齐
.slots {
    width: 150px;
}
.slot {
    width: 100%;
    padding-bottom: 100%;
}