CSS আকৃতি-অনুপাত বৈশিষ্ট্য

CSS প্রপার্টি যা প্রতিক্রিয়াশীল লেআউটে ব্যবধান বজায় রাখতে সাহায্য করে।

Una Kravets

আকৃতির অনুপাত

আকৃতির অনুপাতকে সাধারণত দুটি পূর্ণসংখ্যা এবং একটি কোলন হিসাবে প্রকাশ করা হয়: প্রস্থ:উচ্চতা, বা x:y। ফটোগ্রাফির জন্য সবচেয়ে সাধারণ আকৃতির অনুপাত হল 4:3 এবং 3:2, যখন ভিডিও এবং আরও সাম্প্রতিক ভোক্তা ক্যামেরাগুলিতে একটি 16:9 অনুপাত থাকে।

প্রতিক্রিয়াশীল ডিজাইনের আবির্ভাবের সাথে, দৃষ্টিভঙ্গি অনুপাত বজায় রাখা ওয়েব ডেভেলপারদের জন্য ক্রমবর্ধমান গুরুত্বপূর্ণ হয়ে উঠেছে, বিশেষত যেহেতু উপলব্ধ স্থানের উপর ভিত্তি করে চিত্রের মাত্রা ভিন্ন হয় এবং উপাদানের আকার পরিবর্তন হয়।

যেখানে আকৃতির অনুপাত বজায় রাখা গুরুত্বপূর্ণ হয়ে ওঠে তার কিছু উদাহরণ হল:

• প্রতিক্রিয়াশীল আইফ্রেম তৈরি করা, যেখানে সেগুলি পিতামাতার প্রস্থের 100%, এবং উচ্চতা একটি নির্দিষ্ট ভিউপোর্ট অনুপাত থাকা উচিত
• যখন আইটেমগুলি লোড হয় এবং স্থান নেয় তখন পুনরায় বিন্যাস রোধ করতে চিত্র, ভিডিও এবং এম্বেডগুলির জন্য অন্তর্নিহিত স্থানধারক পাত্র তৈরি করা
• ইন্টারেক্টিভ ডেটা ভিজ্যুয়ালাইজেশন বা SVG অ্যানিমেশনের জন্য অভিন্ন, প্রতিক্রিয়াশীল স্থান তৈরি করা
• কার্ড বা ক্যালেন্ডার তারিখের মতো বহু-উপাদান উপাদানগুলির জন্য অভিন্ন, প্রতিক্রিয়াশীল স্থান তৈরি করা
• বিভিন্ন মাত্রার একাধিক ছবির জন্য অভিন্ন, প্রতিক্রিয়াশীল স্থান তৈরি করা ( object-fit পাশাপাশি ব্যবহার করা যেতে পারে)

অবজেক্ট-ফিট

একটি আকৃতির অনুপাত সংজ্ঞায়িত করা একটি প্রতিক্রিয়াশীল প্রেক্ষাপটে মিডিয়াকে আকার দিতে সাহায্য করে। এই বালতির আরেকটি টুল হল object-fit প্রপার্টি, যা ব্যবহারকারীদের বর্ণনা করতে সক্ষম করে যে কীভাবে একটি ব্লকের মধ্যে একটি অবজেক্ট (যেমন ছবি) সেই ব্লকটি পূরণ করবে:

initial এবং fill মানগুলি স্থান পূরণ করতে চিত্রটিকে পুনরায় সামঞ্জস্য করে। আমাদের উদাহরণে, এটি পিক্সেলগুলিকে পুনরায় সামঞ্জস্য করার কারণে চিত্রটি কুঁচকে যায় এবং ঝাপসা হয়ে যায়। আদর্শ নয়। object-fit: cover স্থান পূরণ করতে চিত্রের ক্ষুদ্রতম মাত্রা ব্যবহার করে এবং এই মাত্রার উপর ভিত্তি করে এটিতে ফিট করার জন্য চিত্রটি ক্রপ করে। এটি তার সর্বনিম্ন সীমানায় "জুম ইন" করে। object-fit: contain নিশ্চিত করে যে সম্পূর্ণ চিত্রটি সর্বদা দৃশ্যমান হয়, এবং তাই cover বিপরীতে, যেখানে এটি বৃহত্তম সীমানার আকার নেয় (উপরের আমাদের উদাহরণে এটি প্রস্থ) এবং এর অন্তর্নিহিত আকৃতির অনুপাত বজায় রাখতে চিত্রটির আকার পরিবর্তন করে মহাকাশে ফিট করার সময়। object-fit: none ক্ষেত্রেই তার কেন্দ্রে (ডিফল্ট অবজেক্টের অবস্থান) প্রাকৃতিক আকারে কাটা ছবি দেখায় না।

object-fit: cover বিভিন্ন মাত্রার চিত্রগুলির সাথে কাজ করার সময় একটি সুন্দর অভিন্ন ইন্টারফেস নিশ্চিত করতে বেশিরভাগ পরিস্থিতিতে কাজ করে, তবে, আপনি এইভাবে তথ্য হারাবেন (ছবিটি তার দীর্ঘতম প্রান্তে কাটা হয়েছে)।

যদি এই বিবরণগুলি গুরুত্বপূর্ণ হয় (উদাহরণস্বরূপ, সৌন্দর্য পণ্যগুলির সমতল স্তরের সাথে কাজ করার সময়), গুরুত্বপূর্ণ বিষয়বস্তু ক্রপ করা গ্রহণযোগ্য নয়। তাই আদর্শ দৃশ্যকল্প হবে বিভিন্ন আকারের প্রতিক্রিয়াশীল ছবি যা ক্রপ না করেই UI স্পেসের সাথে মানানসই।

পুরানো হ্যাক: padding-top সাথে আকৃতির অনুপাত বজায় রাখা

এইগুলিকে আরও প্রতিক্রিয়াশীল করার জন্য, আমরা আকৃতির অনুপাত ব্যবহার করতে পারি। এটি আমাদের একটি নির্দিষ্ট অনুপাতের আকার সেট করতে এবং বাকি মিডিয়াকে একটি পৃথক অক্ষের (উচ্চতা বা প্রস্থ) উপর ভিত্তি করে তৈরি করতে দেয়।

একটি চিত্রের প্রস্থের উপর ভিত্তি করে আকৃতির অনুপাত বজায় রাখার জন্য বর্তমানে একটি ভাল-স্বীকৃত ক্রস-ব্রাউজার সমাধান "প্যাডিং-টপ হ্যাক" নামে পরিচিত। এই সমাধানটির জন্য একটি অভিভাবক ধারক এবং একটি একেবারে রাখা শিশু ধারক প্রয়োজন। তারপরে padding-top হিসাবে সেট করার জন্য একটি শতাংশ হিসাবে আকৃতির অনুপাত গণনা করবে। যেমন:

• 1:1 আকৃতির অনুপাত = 1 / 1 = 1 = padding-top: 100%
• 4:3 আকৃতির অনুপাত = 3 / 4 = 0.75 = padding-top: 75%
• 3:2 আকৃতির অনুপাত = 2 / 3 = 0.66666 = padding-top: 66.67%
• 16:9 আকৃতির অনুপাত = 9 / 16 = 0.5625 = padding-top: 56.25%

এখন যেহেতু আমরা আকৃতির অনুপাতের মান চিহ্নিত করেছি, আমরা এটি আমাদের মূল কন্টেইনারে প্রয়োগ করতে পারি। নিম্নলিখিত উদাহরণ বিবেচনা করুন:

<div class="container">
  <img class="media" src="..." alt="...">
</div>

তারপর আমরা নিম্নলিখিত CSS লিখতে পারি:

.container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.media {
  position: absolute;
  top: 0;
}

aspect-ratio সাথে আকৃতির অনুপাত বজায় রাখা

দুর্ভাগ্যবশত, এই padding-top মানগুলি গণনা করা খুব স্বজ্ঞাত নয়, এবং কিছু অতিরিক্ত ওভারহেড এবং অবস্থানের প্রয়োজন। নতুন অভ্যন্তরীণ aspect-ratio CSS সম্পত্তির সাথে, দৃষ্টিভঙ্গি অনুপাত বজায় রাখার ভাষা আরও স্পষ্ট।

একই মার্কআপের সাহায্যে, আমরা প্রতিস্থাপন করতে পারি: padding-top: 56.25% aspect-ratio: 16 / 9 , width / height একটি নির্দিষ্ট অনুপাতের aspect-ratio সেট করে।

.container {
  width: 100%;
  padding-top: 56.25%;
}

.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

padding-top পরিবর্তে aspect-ratio ব্যবহার করা অনেক বেশি স্পষ্ট, এবং প্যাডিং বৈশিষ্ট্যটিকে তার স্বাভাবিক সুযোগের বাইরে কিছু করার জন্য ওভারহল করে না।

এই নতুন বৈশিষ্ট্যটি auto আকৃতির অনুপাত সেট করার ক্ষমতাও যোগ করে, যেখানে "একটি অভ্যন্তরীণ অনুপাতের সাথে প্রতিস্থাপিত উপাদানগুলি সেই আকৃতির অনুপাত ব্যবহার করে; অন্যথায় বাক্সের কোন পছন্দের অনুপাত নেই।" যদি auto এবং একটি <ratio> উভয়ই একত্রে নির্দিষ্ট করা হয়, তবে পছন্দের অনুপাত হল width নির্দিষ্ট অনুপাত height দ্বারা বিভক্ত যদি না এটি একটি অন্তর্নিহিত অনুপাতের সাথে প্রতিস্থাপিত উপাদান না হয়, যে ক্ষেত্রে সেই অনুপাতটি পরিবর্তে ব্যবহার করা হয়।

উদাহরণ: একটি গ্রিডে ধারাবাহিকতা

এটি সিএসএস গ্রিড এবং ফ্লেক্সবক্সের মতো সিএসএস লেআউট মেকানিজমের সাথে সত্যিই ভাল কাজ করে। বাচ্চাদের সাথে একটি তালিকা বিবেচনা করুন যা আপনি 1:1 অনুপাত বজায় রাখতে চান, যেমন স্পনসর আইকনগুলির একটি গ্রিড:

<ul class="sponsor-grid">
  <li class="sponsor">
    <img src="..." alt="..."/>
  </li>
  <li class="sponsor">
    <img src="..." alt="..."/>
  </li>
</ul>

.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.sponsor img {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: contain;
}

উদাহরণ: লেআউট শিফট প্রতিরোধ করা

aspect-ratio আরেকটি দুর্দান্ত বৈশিষ্ট্য হল এটি ক্রমবর্ধমান লেআউট শিফট প্রতিরোধ করতে এবং আরও ভাল ওয়েব ভাইটাল সরবরাহ করতে স্থানধারক স্থান তৈরি করতে পারে। এই প্রথম উদাহরণে, একটি API থেকে একটি সম্পদ লোড করা যেমন Unsplash মিডিয়ার লোডিং শেষ হলে একটি লেআউট শিফট তৈরি করে।

aspect-ratio ব্যবহার করে, অন্যদিকে, এই লেআউট শিফ্ট প্রতিরোধ করার জন্য একটি স্থানধারক তৈরি করে:

img {
  width: 100%;
  aspect-ratio: 8 / 6;
}

বোনাস টিপ: আকৃতির অনুপাতের জন্য চিত্র বৈশিষ্ট্য

একটি ছবির আকৃতির অনুপাত সেট করার আরেকটি উপায় হল ইমেজ অ্যাট্রিবিউটের মাধ্যমে। আপনি যদি সময়ের আগে চিত্রের মাত্রাগুলি জানেন তবে এই মাত্রাগুলিকে এর width এবং height হিসাবে সেট করা একটি সর্বোত্তম অনুশীলন ৷

উপরের আমাদের উদাহরণের জন্য, মাত্রাগুলি 800px x 600px জেনে, চিত্রের মার্কআপটি এরকম দেখাবে: <img src="image.jpg" alt="..." width="800" height="600"> । যদি প্রেরিত চিত্রটির অনুপাত একই থাকে, কিন্তু অগত্যা সেই সঠিক পিক্সেল মানগুলি না থাকে, আমরা এখনও অনুপাত সেট করতে চিত্র বৈশিষ্ট্য মান ব্যবহার করতে পারি, width: 100% যাতে চিত্রটি সঠিক স্থান নেয়৷ সব একসাথে যা দেখতে হবে:

<!-- Markup -->
<img src="image.jpg" alt="..." width="8" height="6">

/* CSS */
img {
  width: 100%;
  height: auto;
}

শেষ পর্যন্ত, প্রভাবটি CSS এর মাধ্যমে চিত্রের aspect-ratio সেট করার মতোই, এবং ক্রমবর্ধমান বিন্যাস স্থানান্তর এড়ানো হয় ( কোডপেনে ডেমো দেখুন )।

উপসংহার

নতুন aspect-ratio সিএসএস সম্পত্তির সাথে, একাধিক আধুনিক ব্রাউজার জুড়ে চালু করা, আপনার মিডিয়া এবং লেআউট কন্টেনারগুলিতে সঠিক আকৃতির অনুপাত বজায় রাখা আরও কিছুটা সহজবোধ্য হয়ে ওঠে।

আনস্প্ল্যাশের মাধ্যমে অ্যামি শ্যাম্বলেন এবং লিওনেল গুস্তাভের ছবি।