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 يمكن ضبط ذلك بشكل أبسط.۔

حالة الاستخدام الفعلية

على سبيل المثال، يتم عادة عرض مشغلات الفيديو مثل يوتيوب بنسبة عرض إلى ارتفاع 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 ببساطتها وسهولة استخدامها۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video

`@media` وتصميم المواقع المتجاوب