⌘K

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