Articles
CSS का परिचय
`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:1 अनुपात (स्क्वायर)

1:1 अनुपात में यह ऐसा दिखता है।

1.square {
2    width: 200px;
3    aspect-ratio: 1 / 1;
4}
  • इस स्थिति में, .square क्लास वाले एलिमेंट्स की चौड़ाई और ऊँचाई हमेशा समान होती है, जिससे वे वर्गाकार (स्क्वायर) दिखाई देते हैं।

16:9 अनुपात (वाइडस्क्रीन वीडियो या छवियाँ)

16:9 अनुपात में यह ऐसा दिखता है, जिसका उपयोग अक्सर वाइडस्क्रीन वीडियो या छवियों के लिए किया जाता है।

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 के साथ इसे अधिक सरलता से निर्धारित किया जा सकता है।

वास्तविक उपयोग मामला

उदाहरण के लिए, YouTube जैसे वीडियो प्लेयर आमतौर पर 16:9 अनुपात में प्रदर्शित किए जाते हैं। इस अनुपात को बनाए रखने के लिए, 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 चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।

YouTube Video

`@media` और रिस्पॉन्सिव डिज़ाइन