css - 响应式方形父级，带有响应式方形背景图像

Question

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

我需要创建三个 div，它们是使用 vws 的完美响应式正方形。在这些 div 中，我需要带有背景图像的 div，当您缩放浏览器时，这些图像也是完美的正方形。

要注意的是，我需要背景图像也始终是正方形，并相应地调整大小，以便不会剪掉任何图像。

这是一个 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/