title: CSS How to make image size relative to parent?
body: <p>I want to place image in other image as you see below</p>
  
  <p><a href="https://i.stack.imgur.com/UOn7R.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UOn7R.png" alt="image in image with div"></a></p>
  
  <p>And I made it using below codes.</p>
  
  <p>HTML</p>
  
  <pre><code>  &lt;div class="col col-span-1" style="position : relative"&gt;
        &lt;div&gt;
          &lt;img style="max-width:800px; max-height:800px; 
                      width:100%; height:100%;" 
               src="https://i.imgur.com/iY3x1GC.png"&gt;
        &lt;/div&gt;
        &lt;div style="position : absolute; top: 80%; left:50%; "&gt;
          &lt;img src="https://i.imgur.com/C1uxk6Y.png" 
               style="width: 100%; height: 100%;"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.col-span-1 {
      flex-basis: 8.3333%;
  }
  .col {
      flex: 1 1 8%;
      margin: 0 0 0.5rem 0;
      padding: 0.5em 10px;
      box-sizing: border-box;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/9dfqynmn/" rel="nofollow noreferrer">myJSFiddle</a></p>
  
  <p>I made div1's image responsive with width using width : 100%</p>
  
  <p>But I don't know how to make div2's image scale up/down relative to div1's image.</p>
  
  <p>I want to make it like this.</p>
  
  <p><a href="https://i.stack.imgur.com/Zb42g.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Zb42g.png" alt="before"></a> ->(responsive) <a href="https://i.stack.imgur.com/o5QfR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/o5QfR.png" alt="after"></a></p>
  
  <p>I want to use CSS only as possible, thanks in advance.</p>