Egenskapen aspect-ratio

Egenskapen aspect-ratio setter justeringen av elementer langs tverraksen for flex-blokker og langs den horisontale aksen for rutenett. Brukes på foreldreelementet.

Syntaks

velger {
	aspect-ratio: auto eller forhold;
}

Verdier

Verdi	Beskrivelse
`auto`	Elementet har ikke et foretrukket sideforhold og nettleseren setter det automatisk, basert på elementets bredde og høyde.
`forhold`	Forholdet skrives som `16/9`, her er det første tallet bredden, og det andre tallet - høyden. Hvis en verdi ikke er angitt, anses den som `1`. Også noen forhold kan skrives med ett tall. For eksempel kan `2/1` skrives som `0.5`, dette vil gi samme resultat.
`auto && forhold`	Hvis sideforholdet kommer sammen med stikkordet `auto` (eksempel: `auto` `1/2`), vil det angitte forholdet bli valgt, men for erstatningselementer (som bilder og video) med eget sideforhold vil bare det bli brukt.

Eksempel

La oss sette automatisk sideforhold for en knapp:

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

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

Eksempel

La oss nå sette sideforholdet for knappen som 1/2:

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

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

Se også

egenskapen object-fit,
som skalerer elementer