Responsive Square Parent, with responsive square background image - css

Question

What I need is simple, but I'm striking out.
I need to create three divs that are a perfect responsive square using vws.
Inside those div's I need div's with a background image that are also perfect squares when you scale your browser.
The catch is that I need the background image to always be a square as well, and resize accordingly so that none of the image is clipped off.
Here's a fiddle:
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

I'm not sure if this is what you are looking for because the only square i see here is the image-wrapper. Please check this out.
Fiddle
if this is not what you are looking for, can you post some of the images of your desired output.