Bearbeiten von „CSS - Aspect Grid“

<syntaxhighlight lang="CSS">
/***********************************
  Aspect grid by stephanschlegel.de
  Version: 1.0.0
************************************/
.a-container,
.a-wrap,
.a-outer{
  position: relative;
  padding:0;
  width: 100%;
}
.a-inner{
  padding: 12px;
  position: absolute;
  overflow-x:hidden;
  overflow-y:auto;
  width: 100%;
  top: 0;
  bottom: 0;
}
.a-3-4{ /* 3:4 Aspect Ratio */
  width: 100%;
  padding-top: 133.3333%;
  position: relative;
}
.a-6-4,.a-3-2{
  width: 100%;
  padding-top: 66.6666%;
  position: relative;
}
.a-4-6,.a-2-3{
  width: 100%;
  padding-top: 150%;
  position: relative;
}
.a-9-4{
  width: 100%;
  padding-top: 44.4444%;
  position: relative;
}
.a-divina{
  width: 100%;
  padding-top: 76.4%;/* proportio divina */
  position: relative;
}
.a-12-4, .a-6-2, .a-3-1{
  width: 100%;
  padding-top: 33.3333%;
  position: relative;
}

/* other common ratios */
.a-1-1{
  width: 100%;
  padding-top: 100%; /* Square */
  position: relative;
  /* background: pink; */
}
.a-2-1{
  width: 100%;
  padding-top: 50%; /* Square */
  position: relative;
}
.a-1-2{
  width: 100%;
  padding-top: 200%; /* Square */
  position: relative;
}

.a-4-3{
  width: 100%;
  padding-top: 75%; /* 4:3 Aspect Ratio */
  position: relative;
}

.aspect-8-5{
  width: 100%;
  padding-top: 62.5%; /* 8:5 Aspect Ratio */
  position: relative;
}

.a-16-9{
  width: 100%;
  padding-top: 38.2%; /* 16:9 Aspect Ratio */
  position: relative;
}
.a-9-16{
  width: 100%;
  padding-top: 177.7778%; /* 9:16 Aspect Ratio */
  position: relative;
}

</syntaxhighlight>

Es bietet sich an mit den stretch Klassen zu arbeiten (siehe CSS - Helper)