Seitenverhaeltnisse 1.2.0

Nutze .velin-ratio mit einem Aspect-Modifier, um responsive, proportionale Container fuer Videos, Karten und Embeds zu erstellen. English: ratios

Reifegrad: Dokumentiert als stable in VelinStyle 1.2.0. Design Intelligence (Plan / Review / Agent-Meta) ist separat und dort beta / foundation, wo es vermerkt ist.

Wann verwenden

Nutze Ratio-Helper fuer Medien und Embeds, deren Breite fluessig ist, deren Hoehe aber proportional bleiben muss.

Wann nicht verwenden

Nutze sie nicht fuer Inhalte, die eine natuerliche Hoehe brauchen oder nicht beschnitten werden duerfen.

Vordefinierte Seitenverhaeltnisse

Vier eingebaute Seitenverhaeltnisse sind verfuegbar.

1x1

4x3

16x9

21x9

<div class="velin-ratio velin-ratio-1x1">...</div>
<div class="velin-ratio velin-ratio-4x3">...</div>
<div class="velin-ratio velin-ratio-16x9">...</div>
<div class="velin-ratio velin-ratio-21x9">...</div>

Eigenes Seitenverhaeltnis

Setze ein eigenes Seitenverhaeltnis ueber die CSS-Variable --velin-ratio-aspect.

<div class="velin-ratio" style="--velin-ratio-aspect: 50%">
  <!-- 2:1-Seitenverhaeltnis (50% = 1/2) -->
  <iframe src="..."></iframe>
</div>