Flex: Aspect-Ratio Row

A two-column layout, where the columns maintain their aspect ratio.

by Robert Dodd

HTML

<div class="previews bg-muted">
  <div class="preview-col preview-col-lg">
    <div>Example 1</div>
    <div class="img-wrapper img-wrapper-lg">
      <div class="img bg-1"></div>
    </div>
  </div>
  <div class="preview-col preview-col-md">
    <div>Example 2</div>
    <div class="img-wrapper img-wrapper-md">
      <div class="img bg-2"></div>
    </div>
  </div>
</div>

CSS

/* Layout */

.previews {
  margin-left: -10px;
  display: flex;
}

.preview-col {
  padding-left: 10px;
  overflow: auto;
}

.preview-col-lg {
  flex: 2.5333333333;
}

.preview-col-md {
  flex: 1.7777777778;
}

/* Images */

.img-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: auto;
}

.img-wrapper-lg {
  padding: 39.473685% 0 0;
}

.img-wrapper-md {
  padding: 56.25% 0 0;
}

.img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  max-width: 100%;
}

/* Colors */

.bg-1 {
  background: #e3844c;
}

.bg-2 {
  background: #268ae2;
}

.bg-muted {
  background: #ddd;
}