⌘K

Svojstvo aspect-ratio

Svojstvo aspect-ratio zadaje poravnanje elemenata duž poprečne ose za flex blokove i po horizontalnoj osi za gridove. Primenjuje se na roditeljski element.

Sintaksa

cssselektor {
  aspect-ratio: auto ili odnos;
}

Vrednosti

Vrednost Opis
auto Element nema preferirani odnos stranica i pregledač ga postavlja automatski, polazeći od širine i visine elementa.
odnos Odnos se zapisuje u obliku 16/9, ovde prvi broj je širina, a drugi broj - visina. Ako neka vrednost nije navedena, onda se smatra jednakom 1. Takođe neki odnosi su dozvoljeni za pisanje jednim brojem. Na primer, 2/1 može se napisati kao 0.5, to će dati isti rezultat.
auto && odnos Ako odnos stranica ide zajedno sa ključnom rečju auto (primer: auto 1/2), onda će se birati navedeni odnos, ali za zamenjive elemente (kao što su slike i video) sa sopstvenim odnosom biće korišćen samo on.

Primer

Hajde da postavimo za dugme automatski odnos stranica: 

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

Результат:

Primer

A sada hajde da zadamo odnos stranica za dugme kao 1/2: 

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

Результат:

Pogledajte takođe

BackSvojstvo resizeNextSvojstvo object-fit