title: How to fix div aspect ratio?
body: <p>I need to keep <code>div</code> aspect ration as 4:3 in both case when browser mostly horizontal or vertical. And need div size to increase as browser window increase.</p>
  
  <p>I found this solution to set <code>padding-bottom: 75%; width: 100%;</code>. It works when browser window is dominantly vertical, but <strong>when browser window is dominantly horizontal, I don't get the result as desired</strong>.</p>
  
  <p>Do you have any idea? Would you recommend using <code>Javascript</code>? If so, then how?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  div.ex1 {
    border: 1px solid red; 
    padding-bottom: 75%;
    width: 100%;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="ex1"/&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/FHKps.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FHKps.png" alt="enter image description here"></a></p>