Question

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

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

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

<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

我不确定这是否是你要找的，因为我在这里看到的唯一方格是image-wrapper。请检查一下。

Fiddle

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

Answer 2

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/

响应方形父母，具有响应的方形背景图像

2 个答案:

Fiddle