⌘K

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

cssvelger {
  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: 

html<p>
  <button>Click</button>
</p>
cssbutton {
  aspect-ratio: auto;
  background-color: #9DDFA4;
  padding: 1em;
}

Результат:

Eksempel

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

html<p>
  <button>Click</button>
</p>
cssbutton {
  aspect-ratio: 1/2;
  background-color: #9DDFA4;
  padding: 1em;
}

Результат:

Se også

BackEgenskapen resizeNextEgenskapen object-fit