CSS aspect-ratio অ্যাট্রিবিউট

বর্ণনা ও ব্যবহার

aspect-ratio অপার্টিটি আপনাকে ইলেমেন্টটির প্রস্থ এবং উচ্চতা মানের অনুপাত নির্দেশ করতে দেয়。

যদি নির্ধারিত হয় aspect-ratio এবং width উচ্চতা মান নির্দিষ্ট অনুপাত অনুযায়ী সংযোজিত হবে。

অপার্টিটি সম্পর্কে ভালোভাবে বোঝার জন্য aspect-ratio অপার্টিটি সম্পর্কে ভালোভাবে বোঝার জন্য, প্রদর্শনী দেখুন。

সুঝাওয়া:প্রতিক্রিয়াশীল সাজ-সজ্জায় ব্যবহার করুন aspect-ratio অপার্টিটি, যখন ইলেমেন্টটির মাপটি বারবার পরিবর্তন করা হয়, এবং আপনি চান যে প্রস্থ এবং উচ্চতা মানের অনুপাত রক্ষা করা হয়:

একক

উদাহরণ 1

ইলেমেন্টকে অনুপাত যোগ করুন:

div {
  aspect-ratio: 3 / 2;
}

আপনার নিজেই প্রয়োগ করুন

উদাহরণ 2

যদি ডিভ ইলেমেন্টগুলির মাপটি পরিবর্তন করার প্রয়োজন হয়aspect-ratio এই অপার্টিটি ডিভ ইলেমেন্টগুলির অনুপাত নিয়ন্ত্রণ করার জন্য খুবই উপযুক্ত। উদাহরণস্বরূপ，আপনি চান যে ডিভ ইলেমেন্টগুলির মাপটি সব সময়ই মোবাইল এবং ট্যাবলেটের অনুকূল হয় কিন্তু ছবির অনুপাত রক্ষা করা হয়:

#container > div {
  aspect-ratio: 3/2;
}
<div id="container">
  <div>সুতোর</div>
  <div>শেতাক্ষরের দিকে</div>
  <div>পাহাড়</div>
  <div>Cinque Terre</div>
</div>

আপনার নিজেই প্রয়োগ করুন

CSS 语法

aspect-ratio: number/number|initial|inherit;

অপার্টিটি মান

মান বর্ণনা
number প্রথম সংখ্যা পটভূমির অনুপাতের প্রস্থতা মানকে নির্দেশ করে。
number

দ্বিতীয় সংখ্যা পটভূমির অনুপাতের উচ্চতা মানকে নির্দেশ করে。

বাছাইযোগ্য। যদি নির্ধারিত না হয়, উচ্চতা মান 1 হবে。
initial এই অপার্টিটিকে তার ডিফল্ট মানে নিন। দেখুন: initial.
inherit এই অপার্টিটিকে পিতৃতত্ত্ব থেকে উত্তরণ করুন। দেখুন: inherit.

কারিগরি বিবরণ

ডিফল্ট মান: auto
পুনর্বিন্যসন: না
অ্যানিমেশন নির্মাণ: সমর্থন করেন:অ্যানিমেশন-সংক্রান্ত অপার্টিটি.
সংস্করণ: CSS3
JavaScript 语法： object.style.aspectRatio="16/9"

ব্রাউজার সমর্থন

টেবিলের সংখ্যা এই অপার্টিটি সম্পূর্ণরূপে সমর্থনকারী প্রথম ব্রাউজার সংস্করণটির জন্য।

চ্রোম এজ ফায়ারফক্স স্যাফারি অপেরা
88 88 89 15 74

সংক্রান্ত পৃষ্ঠা

শিক্ষাদানCSS গ্রিড লেইবায়ারস

উল্লেখCSS Object-fit প্রতিভাত্ত্ব হলো

উল্লেখCSS Object-position প্রতিভাত্ত্ব হলো