Как разместить процентное значение ширины div за отзывчивым изображением без переполнения

Question

У меня есть контейнер, который содержит (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> 

Я попробовал этот CSS: (я получил его из примера DIV в передней части изображения, которая является противоположностью того, что я хочу, и я не имеют полный ditdh DIV, в отличие от примера)

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

это не тихая работа еще, это своего рода делает, но даже если это так, это не отвечает на все из-за левой, высота и запас атрибутов div. Это самое близкое, что я мог получить.

Я попытался найти похожие вопросы, но они никогда не касаются определенного в процентах div, который меняет все.

Вот что я хочу, чтобы выглядеть следующим образом:

Answer 1

Я думаю, что это то, что вы просите, но я готов работать с вами, чтобы улучшить это, если это необходимо. (Нет дерзость, так что я не мог сделать фрагмент кода.)

body { 
 
    height: 100%; 
 
} 
 

 
.canada-wrapper img { 
 
    margin: auto; 
 
    position: relative; 
 
} 
 

 
.canada-wrapper .percentage { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    width: 0; 
 
    height: 100%; 
 
    background-color: #f00; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="canada-wrapper"> 
 
    <div class="percentage" style="width: 50%;"></div> 
 
    <img src="http://placehold.it/350x150" style="width: 100%"> 
 
</div>

пример немного неудобно, как не меняется процент PHP, но вы должны увидеть, что изображение теперь весы надлежащим образом с размер экрана. Просмотрите пример в Развернутый/полный экран - переполнение стека имеет минимальную ширину, и вы не видите ее в этой маленькой форме.