I am attempting to place 4 images of the same size on a 5th image defined as the background.
Currently, it looks like this:
It works perfectly when the height is fixed, but in my case, the height may vary causing this issue:
This problem isn't surprising as I am using '%' instead of 'px'.
When the width changes, the style 'left: 13%' also changes
Crucial!!! I can only use "%"
How can I achieve the layout shown in the first image even if the height changes?
Here is the relevant code snippet:
<!-- 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>
[EDIT]
I attempted to use right: 0% instead of left: 13%, but no improvement as the background div has a larger width than the background image:
Referenced root DIV: