⌘K

Својството aspect-ratio

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

Синтакса

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,
    кое скалира елементи
BackСвојството resizeNextСвојството object-fit