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

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

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

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

Արժեքներ

Արժեք	Նկարագրություն
`auto`	Տարրին չունի նախընտրելի կողմերի հարաբերակցություն, և բրաուզերը այն սահմանում է ավտոմատ կերպով՝ ելնելով տարրի լայնությունից և բարձրությունից:
`հարաբերակցություն`	Հարաբերակցությունը գրվում է `16/9` տեսքով, այստեղ առաջին թիվը լայնությունն է, իսկ երկրորդ թիվը՝ բարձրությունը: Եթե ինչ-որ արժեք նշված չէ, ապա այն համարվում է հավասար `1`: Նաև որոշ հարաբերակցություններ թույլատրելի է գրել մեկ թվով: Օրինակ, `2/1` կարելի է գրել որպես `0.5`, սա կտա նույն արդյունքը:
`auto && հարաբերակցություն`	Եթե կողմերի հարաբերակցությունը գալիս է `auto` հիմնաբառի հետ միասին (օրինակ՝ `auto` `1/2`), ապա կընտրվի նշված հարաբերակցությունը, բայց փոխարինելի տարրերի համար (ինչպիսիք են պատկերները և տեսանյութերը) սեփական հարաբերակցությամբ կօգտագործվի միայն դա:

Օրինակ

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

<p>
	<button>Click</button>
</p>

button {
	aspect-ratio: auto;
	background-color: #9DDFA4;
	padding: 1em;
}

Օրինակ

Իսկ այժմ եկեք սահմանենք կոճակի կողմերի հարաբերակցությունը որպես 1/2:

<p>
	<button>Click</button>
</p>

button {
	aspect-ratio: 1/2;
	background-color: #9DDFA4;
	padding: 1em;
}

Տես նաև

object-fit հատկությունը,
որը մասշտաբավորում է տարրերը