Html 如何在没有溢出的情况下将百分比定义的宽度div放在响应图像后面

我有一个包含（duh）1个映像和一个div的容器。 图像是带有水平透明线的地图。 我希望div按照PHP中定义的百分比，以响应的方式从右到左水平地填充图像

这是我的密码：

<div class="canada-wrapper">
    <div class="percentage" style="width:<?php the_field('percentage') ?>%;"></div>
    <img src="<?php the_field('canada_img'); ?>" alt="">
</div>

它还没有安静地工作，它有点安静，但即使它安静了，它也没有反应，因为div上的左、高和边距属性。这是我能得到的最接近的

我试图寻找类似的问题，但它们从不涉及百分比定义的div，这会改变一切

---

以下是我希望它看起来的样子：

我认为这就是您所要求的，但是如果必要，我愿意与您合作改进这一点。（没有sass，所以我可以制作代码片段。）

正文{
身高：100%；
}
.img加拿大{
保证金：自动；
位置：相对位置；
}
.加拿大.百分比{
位置：绝对位置；
右：0；
排名：0；
宽度：0；
身高：100%；
背景色：#f00；
}

它要去某个地方了！唯一的问题是百分比div粘在浏览器的右侧。但是，它的百分比至少是根据它的容器，非常感谢您的回复@安托万对不起，那你要百分比分割到哪里？不，没关系！我希望它在图像中，不要比图像大（没有溢出），这样图像中的div可以显示我们在加拿大（地图）有多远。这有意义吗？你有没有可能提供一个地图的链接，这样我就可以下载它并正确地使用这个概念？（没有红色的百分比线）只是图像文件或网站本身？如果可能的话，我可以私下寄给你！没关系，我只是把它用Photoshop处理成我想要的东西哈哈。今天下班后我会再谈这件事。：）@谢谢，不用着急！如果它最终不起作用，我将简单地将div放在地图下，而不使用透明线。无论如何，非常感谢你帮助我，我真的很感激！

.canada-wrapper {
  img {
    margin:auto;
    position: relative;
  }
  .percentage {
    background-color: orange;
    height: 60em;
    position: absolute;
    left: 50%;
    margin-left:30%;
  }
}