html - 相对于图像的特定部分在响应图像上定位文本

Question

我有一张图片需要添加文字(无障碍原因)。该图像使用 Bootstrap img-responsive 类进行响应。即使图像大小发生变化，文本也需要保持在图像的右侧。有没有办法用 CSS 做到这一点？

这是一个基本的例子:

<style>
span#mad {
    position: relative;
    top: 440px;
    left: 440px;
}
</style>
<span id="mad">
    Madagascar
</span>
<div id="map">
    <img src="http://www.freeworldmaps.net/printable/africa/countries.png" 
    class="img-responsive"/>
</div>

https://jsfiddle.net/DTcHh/95125/

马达加斯加的标签应始终保持在岛屿上方。

Answer 1

不清楚您是在寻找静态文本还是动态文本，但听起来像 PopperJS是你要找的。如果您的 img 没有填满整个 div 并且这会产生不需要的间隙，请为您的 img 提供一个 ID，以便您可以直接引用它而不是包装 div。

var popper = new Popper(document.getElementById("mad"), document.getElementById("map"), {
    placement: 'bottom'
});