Html 方格网响应

我想有一些div与图像和输入内我想有这个divs响应和图像是完美的适合，并留在框中。这就是我目前所做的：。但在大屏幕上，正方形变成了长方形，我不想这样！图像不完美，我该怎么办

谢谢你的建议

<div class="col-xs-4 fileContainer padding-box">
    <div class="pic-box">
        <label for="input-1">
           <img id="blah" class="img-upload img-responsive" src="http://icons.iconarchive.com/icons/icons8/ios7/256/Weather-Little-Rain-icon.png" /><input id="input-1" class="input-upload" type="file" accept="image/*"/>
        </label>
    </div>
</div>

---

您必须使用

宽度

和

填充底部

修复来创建响应性正方形

还可以使用

position:absolute

将内容放置在方框内

检查更新的小提琴：

参考代码：

.pic框{
位置：绝对位置；
排名：0；
宽度：100%；
身高：100%；
}
.填充框{
位置：相对位置；
利润率：1.66%；
背景色：红色；
宽度：30%！重要；
垫底：30%；
左侧填充：0！重要；
右边填充：0！重要；
浮动：左；
}
标签{
显示：内联块；
宽度：100%；
边缘底部：5px；
字号：700；
光标：指针；
}
.输入上传{
显示：无！重要；
}
.img上传{
身高：100%；
宽度：100%；
对象匹配：覆盖；
}

谢谢，但是如果我有一张处于横向模式的图像，它并不完美。它没有覆盖所有的盒子。我已经更新了我的答案，将

高度：100%

包含在

中。img上载

以便它也可以缩放横向图像。