How to resize overlapping images while respecting positions and ratios in boostrap

Question

I'm trying to find a way to make overlapping images with different positions and sizes responsive with Bootstrap. This is the bootstrap code I have:

<div class="d-flex justify-content-center">
   <div class="field-container img-overlay-wrap">
       <img src="media/FieldA.png" alt="Field" style="width:100%; opacity:50%">
       <img src="media/DIF_1_orange.png" alt="Point" class="mydif1" style="max-width:30px">
       <img src="media/DIF_2_orange.png" alt="Point" class="mydif2" style="max-width:30px">
       <img src="media/DIF_3_orange.png" alt="Point" class="mydif3" style="max-width:30px">
       <img src="media/DIF_4_orange.png" alt="Point" class="mydif4" style="max-width:30px">
       <img src="media/DIF_5_orange.png" alt="Point" class="mydif5" style="max-width:30px">
       <img src="media/DIF_6_orange.png" alt="Point" class="mydif6" style="max-width:30px">
       <img src="media/DIF_7_orange.png" alt="Point" class="mydif7" style="max-width:30px">
       <img src="media/DIF_8_orange.png" alt="Point" class="mydif8" style="max-width:30px">
       <img src="media/DIF_9_orange.png" alt="Point" class="mydif9" style="max-width:30px">
   </div>
</div>

This is my CSS code:enter image description here

.img-overlay-wrap {
    position: relative;
    display: inline-block; /* <= shrinks container to image size */
    transition: transform 150ms ease-in-out;
}

    .img-overlay-wrap img { /* <= optional, for responsiveness */
        display: block;
        max-width: 100%;
        height: auto;
    }

    .img-overlay-wrap svg {
        position: absolute;
        top: 0;
        left: 0;
    }


::deep .field-container {
    position: relative;
    width: 100%;
    max-width: 307px;
}

    .field-container .mydif1 {
        position: absolute;
        top: 203px;
        left: 138px;
    }

    .field-container .mydif2 {
        position: absolute;
        top: 268px;
        left: 138px;
    }

    .field-container .mydif3 {
        position: absolute;
        top: 195px;
        left: 203px;
    }

    .field-container .mydif4 {
        position: absolute;
        top: 150px;
        left: 168px;
    }

    .field-container .mydif5 {
        position: absolute;
        top: 195px;
        left: 73px;
    }

    .field-container .mydif6 {
        position: absolute;
        top: 150px;
        left: 108px;
    }

    .field-container .mydif7 {
        position: absolute;
        top: 95px;
        left: 63px;
    }

    .field-container .mydif8 {
        position: absolute;
        top: 70px;
        left: 138px;
    }

    .field-container .mydif9 {
        position: absolute;
        top: 95px;
        left: 213px;
    }

And this is the output of the code:

standard image

The goal is to maintain the appearance of the rendered image when the window on the video and therefore the image itself are resized. Is there anyone who can help me solve this problem, preferably without resorting to Java?

If I reduce the window, the background image is reduced, while the overlapping ones remain in their original positions and sizes. I would like them to maintain a consistent appearance.

shirinked image

Would it be acceptable to use vw as unit? For the background and point img width height and width, but also top and left. Or in %. Rather than mixing px and % — chrslg
– chrslg, Commented Jul 21 at 22:34

chrslg · Accepted Answer · 2025-07-21 22:55:17Z

I hope I understood the problem. But here is a simplified example. I made only 2 images (because I need to encode them in base64 URL to make this snippet work, so, 2 is already many bytes for an online post; and anyway I think it is sufficient to demonstrate relative positioning while resizing.

The background image (the "field") if a green 100x100 px square (with a 5px red border), inside which there is a 30×30 px blue square at position 30px, 30px (so pixels [30:60,30:60] are blue)

The "point" image is a 30×30 px showing a diameter 22 yellow dot (over a transparent background).

So, I position that dot such as it lands in the middle of the blue square.

The only size that change directly when the screen is resized is the one of the field-container (since its unit is in vw)

And the two images, that are inside that .field-container use only % as unit (it might be even easier to reason with if you use vw for all units directly, but that depends on how you want to do that layout)

So, here, I display the background at (0,0), and with size (100%,100%) (the height being implicit). So 100%=100px (I cheat a bit by choosing a 100px image. you would have to make some proportionality computation)

So since I want my 30x30 "point" to appear at position 30px (that is 30px/100px = 30%), and be displayed with a width/height 30px = 30%, I just say that in the point positioning and size.

.field-container{
    position: relative;
    display: inline-block;
    top:5vw;
    left:30vw;
    width: 40vw;
    height: 40vw;
}

#field {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    opacity: 50%;
}

.mydif1 {
    position: absolute;
    top: 30%;
    left: 30%;
    width: 30%;
    height: 30%;
}

<div class="d-flex justify-content-center">
   <div class="field-container img-overlay-wrap">
       <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAACplBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAzAABmAACZAADMAAD/AAAAMwAzMwBmMwCZMwDMMwD/MwAAZgAzZgBmZgCZZgDMZgD/ZgAAmQAzmQBmmQCZmQDMmQD/mQAAzAAzzABmzACZzADMzAD/zAAA/wAz/wBm/wCZ/wDM/wD//wAAADMzADNmADOZADPMADP/ADMAMzMzMzNmMzOZMzPMMzP/MzMAZjMzZjNmZjOZZjPMZjP/ZjMAmTMzmTNmmTOZmTPMmTP/mTMAzDMzzDNmzDOZzDPMzDP/zDMA/zMz/zNm/zOZ/zPM/zP//zMAAGYzAGZmAGaZAGbMAGb/AGYAM2YzM2ZmM2aZM2bMM2b/M2YAZmYzZmZmZmaZZmbMZmb/ZmYAmWYzmWZmmWaZmWbMmWb/mWYAzGYzzGZmzGaZzGbMzGb/zGYA/2Yz/2Zm/2aZ/2bM/2b//2YAAJkzAJlmAJmZAJnMAJn/AJkAM5kzM5lmM5mZM5nMM5n/M5kAZpkzZplmZpmZZpnMZpn/ZpkAmZkzmZlmmZmZmZnMmZn/mZkAzJkzzJlmzJmZzJnMzJn/zJkA/5kz/5lm/5mZ/5nM/5n//5kAAMwzAMxmAMyZAMzMAMz/AMwAM8wzM8xmM8yZM8zMM8z/M8wAZswzZsxmZsyZZszMZsz/ZswAmcwzmcxmmcyZmczMmcz/mcwAzMwzzMxmzMyZzMzMzMz/zMwA/8wz/8xm/8yZ/8zM/8z//8wAAP8zAP9mAP+ZAP/MAP//AP8AM/8zM/9mM/+ZM//MM///M/8AZv8zZv9mZv+ZZv/MZv//Zv8Amf8zmf9mmf+Zmf/Mmf//mf8AzP8zzP9mzP+ZzP/MzP//zP8A//8z//9m//+Z///M//////91g91EAAAATklEQVR4nO3NMREAIAwEsDrABv4FoA0HLFx7PyQGUmtASUKT3UYikUgkEolEkpOcJ4lEIpFIJBKJRJKffJNIJBKJRCKRSCQSSWPSTJKXXMsccLZDa6hPAAAAAElFTkSuQmCC" alt="Field" id=field>
       <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAADAFBMVEUAAADIyAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABl0QpvAAABAHRSTlMA/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAXgXLUgAAADdJREFUeJxjYBgSgBEG8EpiVcDIiE+eER3gl0WVxy+NRRZZfqRKUxaohGKMUHwTSi0MBNIa/QEAkfUBdvspzwQAAAAASUVORK5CYII=" alt="Point" class="mydif1">
   </div>
</div>

Great, from your example I was able to understand that in my code it was enough to use percentages instead of pixel coordinates, add the dimensions of the overlapping images in percentages, and it seems to work. I just had to resize the field image to make it easier to calculate the values. For example: '.field-container .mydif1 { position: absolute; top: 65%; left: 45%; height: 10%; width: 10%; }'
You certainly know that % values can be floating points. So it doesn't really matter if your field image is 371×371 pixels or something. Just, then, 1 pixel = 0.269542% as far as the position and size of the numbers are concerned. But sure, it is easier, and more readable if it is 1 pixel=0.25% or something.
Thank you @chrslg, that's exactly right, however since I have other objects to represent in addition to the ones in the example, including an SVG section where I draw lines, to make things easier for myself I've made all the objects easily relatable.

ANKIT SHARMA PIET22CS020 · Accepted Answer · 2025-07-21 17:28:42Z

-1

top: (y / image-height) * 100%

left: (x / image-width) * 100%

answered Jul 21 at 17:28

ANKIT SHARMA PIET22CS020

1

1 Comment

MaurizioMon Jul 21 at 19:03

Thanks for the reply, but unfortunately I have to point out that the image size when resized isn't known, as it depends on whether the Windows window has been reduced or whether the application is running on a device with a smaller display. So I need a way to make the entire set of images (background and overlay) responsive.

Collectives™ on Stack Overflow

How to resize overlapping images while respecting positions and ratios in boostrap

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related