Feeling a bit disoriented. I'm attempting to place a marker over an image using (x,y) coordinates within the range of 0 to 256.
Typically, this is achieved by creating a container like the one referenced here:
However, in my scenario where I'm using the img-fluid class and the image stretches in height relative to its original size of 256x256, I'm unsure of how to wrap it in a container for drawing purposes.
The only idea left is to calculate relative to the width since the image is square and the parent div's width matches the image's width.
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f5979a9a818681879485b5c0dbc7dbc4">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="54363b3b20272026352414617a667a65">[email protected]</a>/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>