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 касиети,
элементтерди масштабдайт