Egenskapen aspect-ratio

Egenskapen aspect-ratio anger justering av element längs med tväraxeln för flexboxar och längs med den horisontella axeln för grid. Tillämpas på förälderelementet.

Syntax

selektor {
	aspect-ratio: auto eller bildförhållande;
}

Värden

Värde	Beskrivning
`auto`	Elementet har inget föredraget bildförhållande och webbläsaren ställer in det automatiskt, baserat på elementets bredd och höjd.
`bildförhållande`	Bildförhållandet skrivs som `16/9`, här är den första siffran bredden, och den andra siffran är höjden. Om något värde inte anges, anses det vara lika med `1`. Också vissa bildförhållanden kan skrivas med ett enda nummer. Till exempel kan `2/1` skrivas som `0.5`, detta ger samma resultat.
`auto && bildförhållande`	Om bildförhållandet kommer tillsammans med nyckelordet `auto` (exempel: `auto` `1/2`), kommer det angivna bildförhållandet att väljas, men för ersättbara element (sådana som bilder och video) med eget bildförhållande kommer endast det att användas.

Exempel

Låt oss ställa in automatisk bildförhållande för knappen:

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

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

Exempel

Och låt oss nu ange bildförhållandet för knappen som 1/2:

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

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

Se även

egenskapen object-fit,
som skalar element