aspect-ratio хусусияти

aspect-ratio хусусияти элементларни flex блоклар учун кўндаланг ўқ бўйиба ва гридлар учун горизонтал ўқ бўйиба тескари ўқ бўйиба тўғрилайди. У асосий элементга қўлланилади.

Синтаксис

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

Қийматлар

Қиймат	Тасниф
`auto`	Элементнинг афзал кўрилган томонлар нисбати йўқ ва браузер уни элементнинг эни ва бўйига асосланган ҳолда автоматик ўрнатади.
`нисбат`	Нисбат `16/9` кўринишида ёзилади, бу ерда биринчи рақам эни, иккинчи рақам эса бўйидир. Агар бирор қиймат кўрсатилмаган бўлса, у `1`га тенг ҳисобланади. Шунингдек, баъзи нисбатларни битта рақам билан ёзиш мумкин. Масалан, `2/1`ни `0.5` сифатида ёзиш мумкин, бу бир хил натижа беради.
`auto && нисбат`	Агар томонлар нисбати `auto` калит сўзи билан бирга келса (мисол: `auto` `1/2`), у ҳолда кўрсатилган нисбат танланади, лекин ўз нисбатига эга бўлган алмаштирилган элементлар (расмлар ва видеолар каби) учун фақат ўша нисбат ишлатилади.

Мисол

Тугма учун автоматik томонлар нисбатини ўрнатамиз:

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 хусусияти,
бу элементларни миқёслайди