⌘K

Proprietatea aspect-ratio

Proprietatea aspect-ratio definește alinierea elementelor de-a lungul axei transversale pentru containerele flex și de-a lungul axei orizontale pentru grid-uri. Se aplică elementului părinte.

Sintaxă

cssselector {
  aspect-ratio: auto sau raport;
}

Valori

Valoare Descriere
auto Elementul nu are un raport de aspect preferat și browserul îl setează automat, pe baza lățimii și înălțimii elementului.
raport Raportul este scris sub forma 16/9, aici primul număr este lățimea, iar al doilea număr este înălțimea. Dacă o valoare nu este specificată, se consideră egală cu 1. De asemenea, unele raporturi pot fi scrise cu un singur număr. De exemplu, 2/1 poate fi scris ca 0.5, acest lucru va da același rezultat.
auto && raport Dacă raportul de aspect este combinat cu cuvântul cheie auto (exemplu: auto 1/2), atunci va fi ales raportul specificat, dar pentru elementele înlocuibile (cum ar fi imaginile și videoclipurile) cu propriul raport de aspect va fi folosit doar acesta.

Exemplu

Să setăm pentru buton un raport de aspect automat: 

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

Результат:

Exemplu

Acum să setăm raportul de aspect pentru buton ca 1/2: 

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

Результат:

Vezi și

BackProprietatea resizeNextProprietatea object-fit