title: How to have aspect ratio by parent height?
body: <p>I want to have aspect ratio controlled by parent height.</p>
  
  <p>Every example I search in stackoverflow and codepen are examples of aspect-ratio by width size. </p>
  
  <p>In my example I have two div. there height is controlled by <code>wrap</code> div. so in the first div there is a div inside that should display in 16:9 aspect-ratio. </p>
  
  <p>This is mean if the height is 200px then the width should be 355px (200*(16/9)).</p>
  
  <p>Please keep in mind that height can change because I use <code>vh</code>.</p>
  
  <p>How to do that with css?</p>
  
  <p><a href="https://codepen.io/Johnso1/pen/jOOVvKM?editors=1100" rel="nofollow noreferrer">Here is my example code in codepen</a></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>.wrap { display:grid;grid-template-columns:1fr;grid-template-rows:30vh 70vh; }
  
  .item { border:1px solid red; }
  
  .aspect-ratio { background:blue; height: 100%; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrap"&gt;
   &lt;div class="item"&gt;
     
     &lt;div class="aspect-ratio"&gt;aspect ratio should be 16:9&lt;/div&gt;
     
    &lt;/div&gt;
   &lt;div class="item"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>