aspect-ratio প্রপার্টি

aspect-ratio প্রপার্টি ফ্লেক্স ব্লকের জন্য ক্রস অ্যাক্সিস বরাবর এবং গ্রিডের জন্য অনুভূমিক অ্যাক্সিস বরাবর এলিমেন্টগুলির অ্যালাইনমেন্ট নির্ধারণ করে। প্যারেন্ট এলিমেন্টে প্রয়োগ করা হয়।

সিনট্যাক্স

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 প্রপার্টি,
যা এলিমেন্টগুলিকে স্কেল করে