title: How to make <div> 1:1 ratio in size?
body: <p>height but the width always has to be fixed and so would the height, so that did not work.</p>
  
  <p><code>img</code> inside to take up the full width of it, and for the height be :9 of it, and continue to maintain the even if the fluid <code>div</code> changes. </p>
  
  <p><strong>PS:</strong> I need pure CSS based answers if possible.</p>