CSS - Grid Snippets

Aspect Ratio Divs - Seitenverhältnis einhalten

Bei Gridbasierten Layouts ist es schön, wenn die Höhe sich so der Breite anpasst, dass immer das gleiche Seitenverhältnis entsteht. So kann man schöne Raster erstellen. Mit Hintergrundbildern passt sich das Bild dann z.B. einer nebenstehenden Textbox an. Oder man kann Text in Divs unten ausrichten und hat trotzdem immer eine passende Höhe (table-cell zum unten ausrichten). Funktioniert z.B. schön in einem 4er Grid. Anwendungsbeispiele: Schlueter-kollegen.de, janna-mode.de (Stand Anfang 2017)

Dieses Beispiel ist für ein 4er Raster optimiert, bei dem man von einer Grundeinheit von 4:3 ausgeht. Will man jetzt mehrere Spalten überstreichen ergeben sich automatisch bei gleicher Höhe die nächsten Seitenverhältnisse.

/***********************************
  Aspect grid by stephanschlegel.de
************************************/
/* set height of div so that bg keeps the aspect ratio */
.stretch{ /*needs pos relative or absolute to work*/
  width: 100%;
  height: 100%;
}
.col{ background: grey;}

/*** Common ratios for 4 col grid 
(base is: one quarter has ratio 3:4) ***/
.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-9-4{
  width: 100%;
  padding-top: 44.4444%;
}
.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;
}
.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: 56.25%; /* 16:9 Aspect Ratio */
  position: relative;
}

/* Text positioning */
.inner{
  display: table;
  margin: 0;
  width: 100%;
  height: 100%;
}
.child a.full{
  display: table-cell;
  padding: 3%;
  vertical-align: bottom;
  text-decoration: none;
  color: inherit;
}

HTML (basiert auf materializecss grid) <syntaxhighlight lang="html5">

                 <a class="full" href="#">

Leistungen

Steuerberatung für Privatpersonen und
Unternehmen. Kompetenz aus einem
komplementären Team.

                 </a>

                 <a class="full" href="#">

Ihre
Karriere

Starten Sie mit uns durch. Wir bieten für
Sie ganz unterschiedliche Modelle zur
Ausbildung oder zum Job.

                 </a>