aspect-ratio հատկությունը

aspect-ratio հատկությունը սահմանում է տարրերի հավասարեցումը լայնակի առանցքի երկայնքով flex բլոկների համար և հորիզոնական առանցքի երկայնքով grid-երի համար: Կիրառվում է ծնող տարրի նկատմամբ:

Շարահյուսություն

cssընտրիչ {
  aspect-ratio: auto կամ հարաբերակցություն;
}

Արժեքներ

Օրինակ

Եկեք սահմանենք կոճակի համար ավտոմատ կողմերի հարաբերակցություն:

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;
}

Результат:

Տես նաև