Egenskaben aspect-ratio

Egenskaben aspect-ratio angiver justeringen af elementer langs den tværgående akse for flex-blokke og langs den vandrette akse for grids. Anvendes på det overordnede element.

Syntaks

cssselektor {
  aspect-ratio: auto eller forhold;
}

Værdier

Værdi	Beskrivelse
`auto`	Elementet har intet foretrukket sideforhold, og browseren indstiller det automatisk baseret på elementets bredde og højde.
`forhold`	Forholdet skrives som `16/9`, her er det første tal bredden, og det andet tal er højden. Hvis en værdi ikke er angivet, anses den for at være `1`. Også nogle forhold kan skrives med et enkelt tal. For eksempel kan `2/1` skrives som `0.5`, hvilket giver det samme resultat.
`auto && forhold`	Hvis sideforholdet kommer sammen med nøgleordet `auto` (eksempel: `auto` `1/2`), vælges det angivne forhold, men for erstatningselementer (såsom billeder og videoer) med deres eget sideforhold vil kun dette blive brugt.

Eksempel

Lad os indstille knappens sideforhold til automatisk:

html<p>
  <button>Click</button>
</p>

cssbutton {
  aspect-ratio: auto;
  background-color: #9DDFA4;
  padding: 1em;
}

Результат:

Eksempel

Og lad os nu angive sideforholdet for knappen som 1/2:

html<p>
  <button>Click</button>
</p>

cssbutton {
  aspect-ratio: 1/2;
  background-color: #9DDFA4;
  padding: 1em;
}

Результат:

Se også

egenskaben object-fit,
som skalerer elementer