## Using inline-block

Using an `inline-block` pseudo element to maintain aspect ratio allows elements to ignore its aspect ratio when content does not fit otherwise. Vertical content positioning is another cool extra. It needs an inner element though.

### Basic CSS:

    /**
     * 1. Allow side by side positioning of helper pseudo
     *    element and child element by using inline-block.
     * 2. Remove gaps between inline-block element by setting
     *    font-size:0 for parent element.
     * 3. Reset font-size for child element.
     *    (For IE8 support add px fallback.)
     * 4. Set vertical align for element content.
     *    - options: top, bottom, middle
     * 5. Set aspect ratio.
     */

    .element {
      font-size: 0; /* [2] */
    }
    .element:after {
      content: "";
      display: inline-block; /* [1] */
      vertical-align: middle; /* [4] */
      padding-bottom: 75%; /* 100% / (4 / 3) = 75% */ /* [5] */
    }
    .element > * {
      box-sizing: border-box;
      display: inline-block; /* [1] */
      width: 100%;
      font-size: 1rem; /* [3] */
      vertical-align: middle; /* [4] */
    }

### And the markup:

    <div class="element">
      <div>
        Content…
      </div>
    </div>

## Alternative or similar solutions

With position: absolute;
  `position: absolute;` -based solutions to maintain aspect ratios are well known. They work great until content is longer than its container: the content gets chopped off.
  Example: Height equals width with pure CSS by @MadeMyDay
  Example: Maintain Aspect Ratio Mixin | CSS-Tricks
With float
  `float` -based alternatives are great because you don’t need an inner element. Unfortunately vertical content positioning is not possible.
  Example: Responsive Aspect-Ratio SCSS Mixin by jakob-e

## Demo

Resize your browser or toggle button to animate resizing.

## 16/9 aspect ratio

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

## 4/3 aspect ratio, top aligned

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

## 2/1 aspect ratio, bottom aligned

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

## 1/1 aspect ratio, middle aligned

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.