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

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

Una Kravets

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

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

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

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

• রেসপন্সিভ আইফ্রেম তৈরি করা, যেখানে সেগুলি পিতামাতার প্রস্থের ১০০% হবে এবং উচ্চতা একটি নির্দিষ্ট ভিউপোর্ট অনুপাত হিসাবে থাকবে।
• ছবি, ভিডিও এবং এম্বেডের জন্য অভ্যন্তরীণ প্লেসহোল্ডার কন্টেইনার তৈরি করা যাতে আইটেমগুলি লোড হয়ে জায়গা দখল করলে পুনরায় লেআউট না হয়।
• ইন্টারেক্টিভ ডেটা ভিজ্যুয়ালাইজেশন বা 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 হিসাবে সেট করার জন্য আকৃতির অনুপাতকে শতাংশ হিসাবে গণনা করা হবে। উদাহরণস্বরূপ:

• ১:১ আকৃতির অনুপাত = ১ / ১ = ১ = padding-top: 100%
• ৪:৩ আকৃতির অনুপাত = ৩/৪ = ০.৭৫ = padding-top: 75%
• ৩:২ আকৃতির অনুপাত = ২/৩ = ০.৬৬৬৬৬ = padding-top: 66.67%
• ১৬:৯ আকৃতির অনুপাত = ৯ / ১৬ = ০.৫৬২৫ = 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 দিয়ে প্রতিস্থাপন করতে পারি, aspect-ratio কে width / height এর একটি নির্দিষ্ট অনুপাতে সেট করতে পারি।

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

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

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

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

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

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

<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 থেকে একটি সম্পদ লোড করার ফলে মিডিয়া লোড করা শেষ হলে একটি লেআউট শিফট তৈরি হয়।

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

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

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

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

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

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

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

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

উপসংহার

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

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