如何在使用img-fluid类的256x256图片上添加坐标标记？

要在自适应的正方形图片上基于原图0-256坐标添加标记，核心是让标记容器和自适应后的图片尺寸完全绑定，具体做法如下：

关键修改点 #

• 给图片和标记添加一个相对定位的父容器，让这个容器自动适配img-fluid的尺寸，同时作为标记的定位基准
• 标记容器设置为绝对定位并完全覆盖父容器，确保和图片区域完全重合
• 将原图的像素坐标转换为百分比，实现自适应场景下的精准定位；如果需要标记中心对准坐标点，配合transform: translate(-50%, -50%)调整

修改后的完整代码 #

<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="position-relative">
                <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; right:0; bottom:0;">
                    <!-- 示例：原图坐标(25,25)，转换为百分比25/256≈9.765%，用transform让标记中心对准坐标点 -->
                    <img style="position: absolute; top: 9.765%; left: 9.765%; height: 16px; width: 16px; transform: translate(-50%, -50%);"
                         src="https://cdn-icons-png.flaticon.com/512/684/684908.png"/>
                </div>
            </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">
            <div class="position-relative">
                <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; right:0; bottom:0;">
                    <img style="position: absolute; top: 9.765%; left: 9.765%; height: 16px; width: 16px; transform: translate(-50%, -50%);"
                         src="https://cdn-icons-png.flaticon.com/512/684/684908.png"/>
                </div>
            </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>

说明 #

• 父容器的position: relative是绝对定位标记的基准，它会自动适应img-fluid的宽度，因为图片是正方形，高度也会和宽度保持一致
• 标记容器的top:0; left:0; right:0; bottom:0确保它完全覆盖图片区域，不管图片怎么自适应
• 坐标转换公式：百分比 = (原图像素坐标 / 256) * 100%，比如原图x=128（中心），对应left: 50%
• 添加transform: translate(-50%, -50%)是为了让标记的中心对准坐标点，如果不需要中心对准，去掉即可，此时标记的左上角会对应坐标点

内容的提问来源于stack exchange，提问作者Danza