Хосияти 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,
ки унсурҳоро миқёсбандӣ мекунад