A Pen by Rainer Angerer.

Boxen-nach-Verhältnis.markdown

Boxen nach Verhältnis

A Pen by Rainer Angerer on CodePen.

License.

index.jade

.container.clearfix
  .col
    .grid-item.square
      .content
        p Cubic
  .col
    .grid-item.square
      .content
        p Cubic
        
  .col
    .grid-item.four-by-three
      .content
        p 4x3
  
  .col
    .grid-item.sixteen-by-nine
      .content
        p 16x9
        
  .col
    .grid-item.eighty-px
      .content
        p 80px
  
  

style.less

* {
  box-sizing: border-box;
}

.clearfix {
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }
}

body {
  background-color: #999;
}

.container {
  width: 100%;
}

.col {
  float: left;
  width: 20%;
  padding: 0 10px;
  margin-bottom: 10px;
}

.grid-item {
  background-color: #666;
  position: relative;
  
  &:before {
    content: '';
    display: block;
    .square& {
      
      padding-top: 100%;
    }
    
    .four-by-three& {
      padding-top: (3/4) * 100%;
    }
    
    .sixteen-by-nine& {
      padding-top: (9/16) * 100%;
    }
    
    .eighty-px& {
      padding-top: 80px;
    }
    
  }
  
  .content {
    
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    
    p {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      
      color: #fff;
      text-transform: uppercase;
      font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
      font-size: 40px;
      line-height: 1;
      height: 40px;
      text-align: center;
      margin: auto;
    }
    
  }
}