正在尝试将标记放在图像的顶部

Question

有点丢失。试图在图像上放置标记(x，y坐标在0到256之间(。

我知道它通常是通过创建一个容器来完成的，如下所示：https://stackoverflow.com/a/29304089/11933719

但由于在我的情况下，我使用img流体类，以及相对于其大小的图像拉伸高度(原始图像大小为256x256(，我不知道如何将其包裹在容器中进行绘制。

我剩下的唯一想法是，由于图像是正方形的，父div宽度将和图像相同，可能会以某种方式计算相对于宽度的值。

<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>

Answer 1

您可以用position: relative;将两个图像包装在div容器中，并将img-fluid类移动到容器中。也可以使用margin而不是padding。

如果您想完美地定位标记，您需要从top减去16px，从left减去8px(考虑到标记是16x16(，以便标记的尖端位于正确的位置。示例：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>