オーバーフローのないレスポンスイメージの背後にパーセンテージで定義された幅divを入れる方法

Question

私は（duh）1イメージと1 divを含むコンテナを持っています。 イメージは、水平の透明な線を含むマップです。 PHPで定義されたパーセンテージに従って、divを右に、水平に、応答的にイメージを塗りつぶすようにします。ここで

は私のコードです：

<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要素の例からそれを得た（と私はしないでくださいそれは静かな作業はまだ、それはちょっといませんが、それがなかった場合でも、それが原因で、左の全く反応しないのです、高さとマージンは上の属性

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

）の例とは異なり、完全なditdhのdiv要素を持っていますdiv。これは私が得ることができる最も近いです。

私は同様の質問を探してみましたが、彼らはすべてを変えるの割合定義されたdiv要素を、心配することはありません。ただし、必要な場合は、これを改善するために、あなたと仕事を喜んで、私はこれがあなたが求めているものだと思い

Answer 1

：ここ

は、私は次のようにそれを見てみたいものです。 （NO SASSので、私は、コードスニペットを作ることができなかった。）

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がないので例は少し厄介ですが、イメージが今で適切にスケールすることがわかります画面サイズ。例を表示拡大/フルスクリーン - スタックオーバーフローには最小幅があり、この小さなフォームでは表示されません。