A bit lost. Trying to put marker over an image (x,y coordinates within 0 to 256).

I know usually its done by creating a container like here: https://stackoverflow.com/a/29304089/11933719

But since in my case i use img-fluid class, and image stretching height relative to its size(original image size is 256x256), i dont know how to wrap it in container to draw on.

Only idea i have left is, since image is square, and parent div width will be the same as image, probably calculate relative to the width somehow.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div >
    <div >
        <div >
            <img src="https://www.healthylifestylesliving.com/wp-content/uploads/2015/12/placeholder-256x256.gif" />
            <div style="position: absolute; top:0; left:0; width: 256px; height: auto">
                <img style="position: absolute; top: 10%; left: 10%; height: 16px; width: 16px;"
                     src="https://cdn-icons-png.flaticon.com/512/684/684908.png"/>
            </div>
            <div >
                <div >
                    <div >
                        500
                    </div>
                    <div >
                        800
                    </div>
                    <div >
                        1000
                    </div>
                </div>
                <div >
                    <div >
                        %PRICE%
                    </div>
                    <div >
                        %SIZE%
                    </div>
                    <div >
                        %SQM%
                    </div>
                </div>

            </div>
            <div >
                <h5 >%TITLE$</h5>
                <p>