Својство aspect-ratio

Својство aspect-ratio задаје поравнање елемената дуж попречне осе за flex блокове и по хоризонталној оси за гридове. Примењује се на родитељски елемент.

Синтакса

cssселектор {
  aspect-ratio: auto или однос;
}

Вредности

Вредност	Опис
`auto`	Елемент нема пожељни однос страница и прегледач га аутоматски поставља, полазећи од ширине и висине елемента.
`однос`	Однос се записује у облику `16/9`, овде први број је ширина, а други број - висина. Ако нека вредност није наведена, онда се сматра да је једнака `1`. Такође неке односе је дозвољено записати једним бројем. На пример, `2/1` може се записати као `0.5`, то ће дати исти резултат.
`auto && однос`	Ако однос страница иде заједно са кључном речи `auto` (пример: `auto` `1/2`), онда ће се бирати наведени однос, али за заменљиве елементе (као што су слике и видео снимци) са сопственим односом користиће се само он.

Пример

Поставимо за дугме аутоматски однос страница:

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

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

Результат:

Пример

А сада задајмо однос страница за дугме као 1/2:

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

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

Результат:

Погледајте такође

својство object-fit,
које скалира елементе