aspect-ratio ගුණය

aspect-ratio ගුණය අනුක්‍රමණ බ්ලොක් සඳහා හරස් අක්ෂය දිගේ සහ වැඩසටහන් සඳහා තිරස් අක්ෂය දිගේ මූලද්‍රව්‍ය පෙළගස්වයි. මාපිය මූලද්‍රව්‍යයට අදාල වේ.

වාක්‍ය ඛණ්ඩය

තෝරන්නා {
	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;
}