title: Maintain aspect ratio with a fixed height
body: <p>So I want to maintain a specific aspect ratio of a <code>div</code>, where the height is fixed. In the past I have done this, but only when using a fixed width like this:</p>
  
  <pre><code>.one-one {
    position: relative;
  }
  .one-one:before {
    display: block;
    content: " ";
    width: 100%;
    padding-top: 56.25%;
    /* Ratio of 16:9 (16w:9h)
     * (h / w) * 100 = %
     * (9 / 16) * 100 = %
     * 0.5625 * 100 = 56.25%
     * 1:1 = 100%
     */
  }
  </code></pre>
  
  <p>So that's how I would do it using a fixed width of 100% in this example. However, this time I want to make an iPhone mockup where there is a fixed height of 100% and the ratio is 4:7 (4w:7h). Using a fixed height, I can set a height of 100% and a max-height of 100% so it doesn't overflow off the page while still keeping the 4:7 ratio. So, does anyone know how you would do that? Either using this method or another method.</p>
  
  <p>Thanks for any help!</p>