title: img width relative to containing div
body: <h2>Original Question</h2>
  
  <p>What is the most efficient way to calculate the width of an image relative to it's containing div in css? </p>
  
  <p>I have the following snippet which sets <code>#image1.width</code> to a percentage that is relative to the width of its parent. I'm using a percentage because I need the <strong>image to scale proportionately to the parent when the screen is resized.</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
    position: relative;
    display: block;
    width: 100%;
  }
  
  #image1 {
    position: absolute;
    left: 10%;
    top: 10%;
    width: 29.43%;
    height: auto;
  }
  
  #under {
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;img id="image1" src="http://placehold.it/206x115"&gt;
    &lt;img id="under" src="http://placehold.it/700x300/ff00f0/ffffff"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It is currently working as intended, except that I have to manually calculate the width percentage for every single image. i.e.</p>
  
  <pre><code>#image1 dimensions == 206x115
  #under dimensions == 700x300
  new #image1.width % == #image1.width / #under.width == 206/700 == ~29.43%
  </code></pre>
  
  <p>What I want to know is if there id a <code>calc()</code> method or similar I can implement to ease/streamline this process?</p>
  
  <p>I was going to use <code>width: calc(100% / 700)</code> however this obviously will not work when the screen size changes.</p>
  
  <p><br></p>
  
  <hr>
  
  <h2>Goals</h2>
  
  <p>To re-iterate, it is imperative that the <code>#under</code> image scales with the screen size and the <code>#image</code> remains proportionate.</p>
  
  <p>I want the natural image ratios preserved with one another (i.e. an image that is one quarter the size of the other will remain as such at all browser widths).</p>
  
  <p><strong>Note:</strong> The <code>html</code> can be reconfigured in any way to achieve this.</p>
  
  <p><strong>Target browsers:</strong> Chrome, Firefox, Edge.</p>
  
  <p><br></p>
  
  <hr>
  
  <h2>Post Bounty Review</h2>
  
  <p><strong>Comment on @Obsidian Age's answer (end of first bounty 31.03.17):</strong></p>
  
  <p>Unfortunately @Obsidian Age's answer is not correct - it is close but not quite and I just wanted to clarify this here... Below is a snippet from his answer... Note that I think it is a good answer, just clarifying why it has not been accepted:</p>
  
  <pre><code>:root {
    --width: 90vw; // Must be viewport-driven
  }
  
  #image1 {
    width: calc(var(--width) / 3); // The 3 can be replaced with any float
  }
  </code></pre>
  
  <p>Setting <code>--width: 90vw</code> what happens if <code>body</code> or <code>div</code> have a <code>max-width</code> set? This is also very hard to calculate for all devices when factoring in <code>viewport-scaling</code>.</p>
  
  <p><code>#image1 { width:calc(var(--width) / 3); }</code> This equates to <code>calc(90vw / 3)</code> which is <code>30vw</code> which would equate to 30% of the images width. But how do we work out the number to divide by? Well it's back to where we started...  <code>width:calc(var(--width) * calc(206/700*100));</code> And this is why I have not accepted this answer.</p>