In diesem kurzen Tutorial wird erklärt, wie man Aspect-Ratios (z.B. 16:9) für DIVs nutzt, um Formate für Elemente festzulegen, die Videos oder Bilder beinhalten und dieses Format responsiv immer behält.
Mit relativem Wrapper und absolutem Inner
Für so ein gewünschtes Verhalten, benötigen wir 2 Divs. Einmal den Äußeren und einmal den Inneren. Der Innere kann auch ein <img> oder <iframe> sein - das Format legen wir imer Äußeren "Wrapper" fest.
figure.video {
margin-left: 35px;
position: relative;
padding-top: 56.25%; // = 16:9 Format
width: 100%; // = Responsives Verhalten hält 16:9 Format
.video-embed {
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
}
}
Die Formel lautet (3/2)×100% ≈ 66.67% für ein 3:2 Verhältnis (Also "padding-bottom: 66.67%;")
Für ein 4:3 Verhältnis wäre es (4/3)×100% = 75% (Also "padding-bottom: 75%;")