Css 响应方形父级，带有响应方形背景图像

我需要的是简单的，但我正在努力

我需要创建三个div，这是一个完美的反应广场使用大众汽车。 在这些div中，我需要一个背景图像的div，当你缩放浏览器时，它也是完美的正方形

问题是，我需要背景图像也始终是正方形，并相应地调整大小，以便不剪裁任何图像

这是一把小提琴：

.图像包装器{
宽度：90vw；
高度：90vw；
边框：1px实心#ccc；
}
.形象{
背景图像：url（'http://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Square_on_plane.svg/200px-Square_on_plane.svg.png');
背景重复：无重复；
背景尺寸：包含；
背景位置：中心；
背景大小：100%；
边缘底部：30px；
填充：100px；

---

}我不确定这是否是您要找的，因为我在这里看到的唯一方块是

图像包装器。请看这个

如果这不是您想要的，您可以发布您想要的输出的一些图像。
html

<div class="image-wrapper">
<div class="image">
    <img src="http://3.bp.blogspot.com/--7gtJQo5mHE/UGMKHZapqmI/AAAAAAAAWGU/5X26Pgj_St4/s1600/funny-cat-pictures-017-005.jpg"/>
</div>
<div class="image">
     <img src="http://3.bp.blogspot.com/--7gtJQo5mHE/UGMKHZapqmI/AAAAAAAAWGU/5X26Pgj_St4/s1600/funny-cat-pictures-017-005.jpg"/>
</div>
<div class="image">
     <img src="http://3.bp.blogspot.com/--7gtJQo5mHE/UGMKHZapqmI/AAAAAAAAWGU/5X26Pgj_St4/s1600/funny-cat-pictures-017-005.jpg"/>
</div>

***如果您将小提琴调整到较小的比例，您可以看到未剪裁的图像。谢谢，这是一个具有完美方形图像的更新小提琴。这将更改标记。根据问题，他需要“image”类有一个bg，而不包含图像标记。@PhillipKregg他想做的事做不到，我已经去过了。谢谢Carol和Phillip！我可以更改标记。在处理嵌套的div时，如果一些可怜的灵魂无法更改它们的标记，同样的问题也会出现：
<div class="image-wrapper">
<div class="image">
    <img src="http://3.bp.blogspot.com/--7gtJQo5mHE/UGMKHZapqmI/AAAAAAAAWGU/5X26Pgj_St4/s1600/funny-cat-pictures-017-005.jpg"/>
</div>
<div class="image">
     <img src="http://3.bp.blogspot.com/--7gtJQo5mHE/UGMKHZapqmI/AAAAAAAAWGU/5X26Pgj_St4/s1600/funny-cat-pictures-017-005.jpg"/>
</div>
<div class="image">
     <img src="http://3.bp.blogspot.com/--7gtJQo5mHE/UGMKHZapqmI/AAAAAAAAWGU/5X26Pgj_St4/s1600/funny-cat-pictures-017-005.jpg"/>
</div>

.image-wrapper {
    width: 90vw;
    height: 90vw;
    border: 1px solid #ccc;
}

.image {
    margin-bottom: 30px;
width: 100%;
}

.image img {
width: 100%;
}