响应式正方形父，带有响应式平方背景图像

Question

我需要的很简单，但是我正在罢工。

我需要创建三个使用大众的响应式正方形，这是一个完美的响应正方形。在这些Div的内部，我需要Div的背景图像，当您扩展浏览器时，它们也是完美的正方形。

捕获是我还需要背景图像始终是一个正方形，并相应地调整大小，以便没有剪切图像。

这是小提琴：http://jsfiddle.net/lm7qd/2/

<div class="image-wrapper">
    <div class="image">
    </div>
</div>
<div class="image-wrapper">
    <div class="image">
    </div>
</div>
<div class="image-wrapper">
    <div class="image">
    </div>
</div>
.image-wrapper {
    width: 90vw;
    height: 90vw;
    border: 1px solid #ccc;
 }
.image {
    background-image:   url('http://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Square_on_plane.svg/200px-Square_on_plane.svg.png');
    background-repeat: no-repeat;
    background-size:contain;
    background-position:center;
    background-size: 100%;
    margin-bottom: 30px;
    padding: 100px;

}

Answer 1

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>

CSS

.image-wrapper {
    width: 90vw;
    height: 90vw;
    border: 1px solid #ccc;
}
.image {
    margin-bottom: 30px;
width: 100%;
}
.image img {
width: 100%;
}

http://jsfiddle.net/lm7qd/12/

Answer 2

我不确定这是否是您想要的，因为我在这里看到的唯一正方形是image-wrapper。请检查一下。

小提琴

如果这不是您要寻找的，您可以发布所需输出的一些图像。