Trying to put marker on top of the image

Question

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/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row justify-content-center row-cols-1 row-cols-sm-1 row-cols-md-2 row-cols-lg-3 row-cols-xxl-4 g-4">
    <div class="col">
        <div class="card shadow h-100">
            <img src="https://www.healthylifestylesliving.com/wp-content/uploads/2015/12/placeholder-256x256.gif" class="img-fluid shadow-sm p-2"/>
            <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 class="card-header text-center">
                <div class="row p-0">
                    <div class="col-4">
                        500
                    </div>
                    <div class="col-4 border-start border-end">
                        800
                    </div>
                    <div class="col-4">
                        1000
                    </div>
                </div>
                <div class="row p-0 fw-bold">
                    <div class="col-4">
                        %PRICE%
                    </div>
                    <div class="col-4 border-start border-end">
                        %SIZE%
                    </div>
                    <div class="col-4">
                        %SQM%
                    </div>
                </div>

            </div>
            <div class="card-body">
                <h5 class="card-title">%TITLE$</h5>
                <p>%DESCRIPTION%</p>
            </div>
            <div class="card-footer text-center">
                <b>Call: %PHONE%</b>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card shadow h-100">
            <img src="https://www.healthylifestylesliving.com/wp-content/uploads/2015/12/placeholder-256x256.gif" class="img-fluid shadow-sm p-2"/>
            <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 class="card-header text-center">
                <div class="row p-0">
                    <div class="col-4">
                        500
                    </div>
                    <div class="col-4 border-start border-end">
                        800
                    </div>
                    <div class="col-4">
                        1000
                    </div>
                </div>
                <div class="row p-0 fw-bold">
                    <div class="col-4">
                        %PRICE%
                    </div>
                    <div class="col-4 border-start border-end">
                        %SIZE%
                    </div>
                    <div class="col-4">
                        %SQM%
                    </div>
                </div>

            </div>
            <div class="card-body">
                <h5 class="card-title">%TITLE$</h5>
                <p>%DESCRIPTION%</p>
            </div>
            <div class="card-footer text-center">
                <b>Call: %PHONE%</b>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card shadow h-100">
            <img src="https://www.healthylifestylesliving.com/wp-content/uploads/2015/12/placeholder-256x256.gif" class="img-fluid shadow-sm p-2"/>
            <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 class="card-header text-center">
                <div class="row p-0">
                    <div class="col-4">
                        500
                    </div>
                    <div class="col-4 border-start border-end">
                        800
                    </div>
                    <div class="col-4">
                        1000
                    </div>
                </div>
                <div class="row p-0 fw-bold">
                    <div class="col-4">
                        %PRICE%
                    </div>
                    <div class="col-4 border-start border-end">
                        %SIZE%
                    </div>
                    <div class="col-4">
                        %SQM%
                    </div>
                </div>

            </div>
            <div class="card-body">
                <h5 class="card-title">%TITLE$</h5>
                <p>%DESCRIPTION%</p>
            </div>
            <div class="card-footer text-center">
                <b>Call: %PHONE%</b>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card shadow h-100">
            <img src="https://www.healthylifestylesliving.com/wp-content/uploads/2015/12/placeholder-256x256.gif" class="img-fluid shadow-sm p-2"/>
            <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 class="card-header text-center">
                <div class="row p-0">
                    <div class="col-4">
                        500
                    </div>
                    <div class="col-4 border-start border-end">
                        800
                    </div>
                    <div class="col-4">
                        1000
                    </div>
                </div>
                <div class="row p-0 fw-bold">
                    <div class="col-4">
                        %PRICE%
                    </div>
                    <div class="col-4 border-start border-end">
                        %SIZE%
                    </div>
                    <div class="col-4">
                        %SQM%
                    </div>
                </div>

            </div>
            <div class="card-body">
                <h5 class="card-title">%TITLE$</h5>
                <p>%DESCRIPTION%</p>
            </div>
            <div class="card-footer text-center">
                <b>Call: %PHONE%</b>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card shadow h-100">
            <img src="https://www.healthylifestylesliving.com/wp-content/uploads/2015/12/placeholder-256x256.gif" class="img-fluid shadow-sm p-2"/>
            <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 class="card-header text-center">
                <div class="row p-0">
                    <div class="col-4">
                        500
                    </div>
                    <div class="col-4 border-start border-end">
                        800
                    </div>
                    <div class="col-4">
                        1000
                    </div>
                </div>
                <div class="row p-0 fw-bold">
                    <div class="col-4">
                        %PRICE%
                    </div>
                    <div class="col-4 border-start border-end">
                        %SIZE%
                    </div>
                    <div class="col-4">
                        %SQM%
                    </div>
                </div>

            </div>
            <div class="card-body">
                <h5 class="card-title">%TITLE$</h5>
                <p>%DESCRIPTION%</p>
            </div>
            <div class="card-footer text-center">
                <b>Call: %PHONE%</b>
            </div>
        </div>
    </div>
</div>

The image parent has `width: 256px; height: auto`. Maybe if you change it to `width: 100%; height: 100%` then you can set the icon position with `left: 25%; top 50%` (or whatever position you desire with by using percentages) — Boguz, Sep 20 '22 at 17:30
If i do that, div will stretch over whole card, and top: 50% will be somewhere in description position — Danza, Sep 20 '22 at 18:12
If you simply remove the div that is wrapping the marker image doesn't this give you the expected result? I might have misunderstood what you are trying to achieve. — Dimitris Maragkos, Sep 20 '22 at 18:40
`image-fluid` applies a `max-width` so that the images do not overflow their parents. You should still be able to apply a reasonable `width`. — fnostro, Sep 20 '22 at 18:46
Right now left position works as expected, but top position calculated on height of the whole card, and i need it to calculate if from image height. Ok. I have multiple rows of this cards, and they can be different height, depends on description length i put in. = Whole card height can be like 500px or 2000px. Also i have image, that stretches but keep its ratio. So width changing too. If i wrap this image with some DIV, .img-fluid wont work then (width of image sometimes will be less than width of the card), but it give the ability to set top and left for the marker image correctly. — Danza, Sep 20 '22 at 18:57
https://jsfiddle.net/hb0m59ja/ Try to change width of window and i think you will see what i mean. Sorry if was unclear in my explanation. — Danza, Sep 20 '22 at 19:12
Is this any close to what you want? https://jsfiddle.net/3k8htu1L/ Only first card is edited. — Dimitris Maragkos, Sep 20 '22 at 21:54
Well, its even better... I came up with this solution - https://jsfiddle.net/2pvf06k7/ And a friend also offer this one(which im not 100% sure how works, since flexbox a little confusing for me) - https://jsfiddle.net/jx0cam6h/ Yours does same, but also using margin instead of padding. I was trying to make it work just now, since when i pass real coordinates, some of them that close to edges appear to be on white border. So yours fix that problem looks like, im going to test right now but im sure it will work. Thank you very much! — Danza, Sep 20 '22 at 22:33

score 1 · Accepted Answer · answered Sep 21 '22 at 02:17

You can wrap both images in a div container with position: relative; and move the img-fluid class to the container. Also use margin instead of padding.

If you want to position the marker perfectly you need to subtract 16px from top and 8px from left (considering marker is 16x16) so that tip of the marker is at the correct position. Example: top: calc(100% - 16px); left: calc(100% - 8px);

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row justify-content-center row-cols-1 row-cols-sm-1 row-cols-md-2 row-cols-lg-3 row-cols-xxl-4 g-4">
    <div class="col">
        <div class="card shadow h-100">
            <div class="img-fluid shadow-sm m-2" style="position: relative;">
                <img src="https://www.healthylifestylesliving.com/wp-content/uploads/2015/12/placeholder-256x256.gif" class="w-100"/>              
                <img class="marker" style="position: absolute; top: calc(0% - 16px); left: calc(0% - 8px); height: 16px; width: 16px;"
                     src="https://cdn-icons-png.flaticon.com/512/684/684908.png"/>
            </div>
            <div class="card-header text-center">
                <div class="row p-0">
                    <div class="col-4">
                        500
                    </div>
                    <div class="col-4 border-start border-end">
                        800
                    </div>
                    <div class="col-4">
                        1000
                    </div>
                </div>
                <div class="row p-0 fw-bold">
                    <div class="col-4">
                        %PRICE%
                    </div>
                    <div class="col-4 border-start border-end">
                        %SIZE%
                    </div>
                    <div class="col-4">
                        %SQM%
                    </div>
                </div>

            </div>
            <div class="card-body">
                <h5 class="card-title">%TITLE$</h5>
                <p>%DESCRIPTION%</p>
            </div>
            <div class="card-footer text-center">
                <b>Call: %PHONE%</b>
            </div>
        </div>
    </div>
</div>

Trying to put marker on top of the image

1 Answers1