如何将4张图像2x2放在其他图像上作为背景，CSS？

Question

我尝试将4张图像（相同尺寸）放在定义为BG的第5张图像上。

这就是现在的样子：

如果height已修复，它可以正常工作但在我的情况下，height可能会发生变化，我会遇到这种情况：

这个问题并不让我感到惊讶，因为我使用%但不使用px。

当width发生变化时，样式left: 13%会发生变化

非常重要!!!我只能使用“％”

即使身高变化，我怎样才能获得第一张照片？

以下是相关代码：

<!-- BG image -->
<div style="position: relative; right: 0; top: 0; height:100%">   
    <img src="img/groups/pic-shade.png" style="
                             position: relative;
                             top: 0%;
                             right: 0%;
                             height: 17.6%;
                             ">  
     <!-- left-top image -->
    <img  
           style="position: absolute;
                  height: 42.25%;
                  top: 0%;
                  left: 0%;" src="img/group_6.png">
<!-- right-top image -->
    <img  
           style="position: absolute;
                  height: 42.25%;
                  top: 0%;
                  left: 13%;" src="img/group_6.png">

<!-- left-bottom image -->
    <img  
           style="position: absolute;
                  height: 42.25%;
                  bottom: 0%;
                  left: 0%;" src="img/group_6.png">

<!-- right-bottom image -->
    <img  
           style="position: absolute;
                  height: 42.25%;
                  bottom: 0%;
                  left: 13%;" src="img/group_6.png">
  </div> 

[编辑]

我尝试将right: 0%改为left: 13%，但它对我没有帮助，因为BG div的宽度大于BG图像：

选择了根DIV：

Answer 1

<强> DEMO

不要使用绝对位置 - 它会打破元素之间的流量和关系，这意味着它们无法显示对彼此宽度高度变化的任何响应。

而是使用表格技术 - 检查演示。

<强> HTML

<div class="bg-image-wrapper">
    <div class="table">
        <div class="row">
            <div class="cell"><img src="http://placehold.it/100x100" alt="" /></div>
            <div class="cell"><img src="http://placehold.it/100x100" alt="" /></div>
        </div>
        <div class="row">
            <div class="cell"><img src="http://placehold.it/100x100" alt="" /></div>
            <div class="cell"><img src="http://placehold.it/100x100" alt="" /></div>
        </div>
    </div>
</div>

<强> CSS

img{
    display:block;
}
.table{
    display: table;
}
.row{
    display: table-rwo;
}
.cell{
    display:table-cell;
}
.bg-image-wrapper{
    display: inline-block;
    background: url(http://placehold.it/200x200);
    border-radius: 10px;
    overflow: hidden;
}

Answer 2

<!-- BG image -->
<div style="background-image:url("img/groups/pic-shade.png"); position: relative;  right: 0; top: 0; height:100%">   

<table>
<tr>
<td>
                   <img style="height: 100%;width: 100%;src="img/group_6.png">
</td>
<td>
                   <img style="height: 100%;width: 100%;src="img/group_6.png">
 </td>
 </tr>
 <tr>
 <td>
                    <img style="height: 100%;width: 100%;src="img/group_6.png">
</td>
<td>
                    <img style="height: 100%;width: 100%;src="img/group_6.png">
</td>
</tr>

</div>