Articles
সিএসএস-এর পরিচিতি
`aspect-ratio` সম্পত্তি এবং প্রতিক্রিয়াশীল ডিজাইন

`aspect-ratio` সম্পত্তি এবং প্রতিক্রিয়াশীল ডিজাইন

এই প্রবন্ধে aspect-ratio সম্পত্তি এবং প্রতিক্রিয়াশীল ডিজাইন ব্যাখ্যা করা হয়েছে।

আমরা aspect-ratio সম্পত্তি ব্যবহার করে প্রতিক্রিয়াশীল ডিজাইনের কৌশল উপস্থাপন করছি।

YouTube Video

প্রিভিউর জন্য HTML

css-responsive-aspect-ratio.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-responsive-aspect-ratio.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Responsive Design</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>aspect-ratio</h2>
20        </header>
21        <article>
22            <h3>aspect-ratio Syntax</h3>
23            <section>
24                <header><h4>CSS</h4></header>
25<pre class="sample">
26aspect-ratio: &lt;ratio&gt;;
27</pre>
28            </section>
29        </article>
30        <article>
31            <h3>aspect-ratio 1:1</h3>
32            <section>
33                <header><h4>CSS</h4></header>
34<pre class="sample">
35.square {
36    width: 200px;
37    aspect-ratio: 1 / 1;
38}
39</pre>
40            </section>
41            <header><h4>HTML+CSS</h4></header>
42            <section class="sample-view">
43              <img src="example.jpg" class="square">
44            </section>
45        </article>
46        <article>
47            <h3>aspect-ratio 16:9</h3>
48            <section>
49                <header><h4>CSS</h4></header>
50<pre class="sample">
51.widescreen {
52    width: 100%;
53    aspect-ratio: 16 / 9;
54}
55</pre>
56            </section>
57            <section class="sample-view">
58              <img src="example.jpg" class="widescreen">
59            </section>
60        </article>
61        <article>
62            <h3>aspect-ratio 2</h3>
63            <section>
64                <header><h4>CSS</h4></header>
65<pre class="sample">
66.custom-ratio {
67    width: 400px;
68    aspect-ratio: 2;
69}
70</pre>
71            </section>
72            <section class="sample-view">
73              <img src="example.jpg" class="custom-ratio">
74            </section>
75        </article>
76        <article>
77            <h3>aspect-ratio Example</h3>
78            <section>
79                <header><h4>HTML</h4></header>
80<pre>
81&lt;div class="video-container"&gt;
82  &lt;iframe src="https://www.youtube.com/embed/example"&gt;&lt;/iframe&gt;
83&lt;/div&gt;
84</pre>
85                <header><h4>CSS</h4></header>
86<pre class="sample">
87.video-container {
88    width: 100%;
89    aspect-ratio: 16 / 9;
90}
91</pre>
92            </section>
93        </article>
94    </main>
95</body>
96</html>

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

aspect-ratio প্রপার্টি ব্যবহার করা হয় কোন উপাদানের প্রস্থ-উচ্চতা অনুপাত (অ্যাসপেক্ট রেশিও) সেট করতে। এটি বিশেষ করে মিডিয়া কন্টেন্ট যেমন ছবি বা ভিডিও, অথবা রেসপন্সিভ ডিজাইনে একটি নির্দিষ্ট রেশিও সহ একটি উপাদান প্রদর্শনের ক্ষেত্রে কার্যকর।

মূল সিনট্যাক্স 

1aspect-ratio: <ratio>;
  • <ratio> প্রস্থ থেকে উচ্চতার অনুপাত নির্ধারণ করে। অনুপাতটি "প্রস্থ:উচ্চতা" ফরম্যাটে লেখা হয় অথবা প্রস্থ-উচ্চতার অনুপাতের জন্য একটি একক সংখ্যা দ্বারা উপস্থাপিত হয়।

উদাহরণ

১:১ অনুপাত (চতুর্ভুজ)

এটি ১:১ অনুপাতের সাথে দেখতে এইরকম হয়।

1.square {
2    width: 200px;
3    aspect-ratio: 1 / 1;
4}
  • এই ক্ষেত্রে, .square ক্লাস থাকা উপাদানগুলোর প্রস্থ ও উচ্চতা সবসময় সমান রাখা হয়, ফলে তা চতুর্ভুজ আকারে প্রদর্শিত হয়।

১৬:৯ অনুপাত (ওয়াইডস্ক্রিন ভিডিও বা ছবি)

এটি ১৬:৯ অনুপাতের সাথে দেখতে এইরকম হয়, যা সাধারণত ওয়াইডস্ক্রিন ভিডিও বা ছবির জন্য ব্যবহৃত হয়।

1.widescreen {
2    width: 100%;
3    aspect-ratio: 16 / 9;
4}
  • এই ক্ষেত্রে, .widescreen ক্লাস সহ উপাদানগুলি 16:9 অ্যাসপেক্ট রেশিও বজায় রেখে প্রস্থ অনুযায়ী স্বয়ংক্রিয়ভাবে তাদের উচ্চতা সামঞ্জস্য করে।

একটি একক সংখ্যা দিয়ে অনুপাত নির্দিষ্ট করুন

একটি একক সংখ্যা দিয়ে অনুপাত নির্দিষ্ট করলে এটি দেখতে এইরকম হয়।

1.custom-ratio {
2    width: 400px;
3    aspect-ratio: 2;
4}
  • এখানে, সংখ্যা 2 একটি 2 / 1 রেশিও নির্দেশ করে, যার ফলে উপাদানটির প্রস্থ তার উচ্চতার দ্বিগুণ হয়ে যায়।

aspect-ratio প্রপার্টির সুবিধাগুলি

  • রেসপনসিভ ডিজাইন উপাদানটি বিভিন্ন ডিভাইস ও উইন্ডো সাইজে অনুপাত বজায় রেখেই স্বয়ংক্রিয়ভাবে তার আকার পরিবর্তন করতে পারে।
  • সহজ বাস্তবায়ন নির্দিষ্ট অনুপাত বজায় রাখতে পূর্বে padding এর মতো পদ্ধতি ব্যবহৃত হত, কিন্তু aspect-ratio দিয়ে এটি আরও সহজে নির্ধারণ করা যায়।

বাস্তব ব্যবহারের পরিস্থিতি

উদাহরণস্বরূপ, ইউটিউবের মতো ভিডিও প্লেয়ার সাধারণত ১৬:৯ অনুপাতের সাথে প্রদর্শিত হয়। এই অনুপাত বজায় রাখার জন্য, aspect-ratio প্রপার্টি ব্যবহার করে সহজেই একটি প্রতিক্রিয়াশীল ভিডিও কন্টেইনার তৈরি করা যেতে পারে।

1<div class="video-container">
2  <iframe src="https://www.youtube.com/embed/example"></iframe>
3</div>
1.video-container {
2    width: 100%;
3    aspect-ratio: 16 / 9;
4}
  • এর ফলে যে কোনো ডিভাইসে ভিডিওগুলি 16:9 অনুপাত বজায় রাখতে পারে।

সারসংক্ষেপ

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

প্রথাগত জটিল CSS কৌশলের তুলনায়, aspect-ratio এর সরলতা এবং সহজাত ব্যবহারের জন্য সুপরিচিত।

আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।

YouTube Video

`@media` এবং প্রতিক্রিয়াশীল ডিজাইন