تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

دعم خاصية جديدة بنسبة عرض إلى ارتفاع CSS في Chromium وSafari Technology Preview وFirefox Nightly

خاصية CSS الجديدة التي تساعد في الحفاظ على المسافات في التنسيقات المتجاوبة.

Una Kravets

ملاحظة: ملخّص: إنّ الحفاظ على نسبة عرض إلى ارتفاع ثابتة، تُعرف باسم نسبة العرض إلى الارتفاع، أمر بالغ الأهمية في تصميم الويب السريع الاستجابة ومنع متغيّرات التصميم التراكمية. الآن، هناك طريقة أكثر سهولة لتنفيذ ذلك من خلال إطلاق السمة aspect-ratio الجديدة في Chromium 88 وFirefox 87 ومعاينة التكنولوجيا في Safari 118.

نسبة العرض إلى الارتفاع

دعم المتصفح

المصدر

يتم التعبير عن نسبة العرض إلى الارتفاع بشكل شائع في شكل عددين صحيحين ونقطتان في أبعاد: العرض:الارتفاع أو x:y. أكثر نسب العرض إلى الارتفاع شيوعًا للتصوير هي 4:3 و3:2، في حين أن الفيديو، والكاميرات الاستهلاكية الأحدث، غالبًا ما تكون نسبة العرض إلى الارتفاع هي 16:9.

صورتان لهما نسبة العرض إلى الارتفاع نفسها. وحجم أحدهما هو 634 × 951 بكسل، بينما يكون حجم الآخر 200 × 300 بكسل. نسبة العرض إلى الارتفاع في كليهما 2:3.

مع ظهور التصميم سريع الاستجابة، تزداد أهمية الحفاظ على نسبة العرض إلى الارتفاع في على الويب، خاصةً مع اختلاف أبعاد الصور وتغير أحجام العناصر بناءً على القيمة المتاحة مساحة.

وفي ما يلي بعض الأمثلة على الحالات التي يكون فيها الحفاظ على نسبة العرض إلى الارتفاع أمرًا مهمًا:

إنشاء إطارات iframe سريعة الاستجابة، حيث تمثل 100% من عرض العنصر الرئيسي، ويجب أن يظل الارتفاع نسبة إطار عرض معيّنة
إنشاء حاويات أساسية للعناصر النائبة للصور والفيديوهات والعناصر المضمّنة لمنع إعادة التنسيق عند تحميل العناصر وتستهلك مساحة
إنشاء مساحة موحَّدة سريعة الاستجابة لتصورات البيانات التفاعلية أو الرسوم المتحركة بتنسيق SVG
إنشاء مساحة موحَّدة سريعة الاستجابة للمكونات المتعددة العناصر مثل البطاقات أو تواريخ التقويم
إنشاء مساحة موحَّدة سريعة الاستجابة لعدة صور بأبعاد مختلفة (يمكن استخدامها مع object-fit)

احتواء العنصر

يساعدنا تحديد نسبة العرض إلى الارتفاع في تغيير حجم الوسائط في سياق سريع الاستجابة. وهناك أداة أخرى في هذا الحزمة هي السمة object-fit، التي تتيح للمستخدمين وصف كيفية كائن (مثل صورة). داخل كتلة يجب أن يملأ هذا الكتلة:

العرض التوضيحي لملاءمة العناصر — عرض قيم `object-fit` مختلفة. يمكنك الاطّلاع على عرض توضيحي حول Codepen.

تعيد القيمتان initial وfill ضبط الصورة لملء المساحة. في مثالنا، يؤدي هذا إلى أن تكون الصورة ضبابية ومموّهة، نظرًا لإعادة ضبط وحدات البكسل. ليست مثالية. استخدامان (object-fit: cover) أصغر أبعاد الصورة لملء المساحة واقتصاص الصورة لتلائمها بناءً على ذلك البعد. "تكبير" إلى أدنى حدود لها. تضمن السمة object-fit: contain عرض الصورة بأكملها. دائمًا ما تكون مرئية، وعكس cover، حيث يأخذ حجم الحد الأكبر (في المثال أعلاه هذا هو العرض)، ويغيّر حجم الصورة للحفاظ على نسبة العرض إلى الارتفاع الأساسية مع الاندماج في المساحة الإبداعية. تعرض الحالة object-fit: none الصورة التي تم اقتصاصها في منتصفها. (موضع العنصر التلقائي) بحجمه الطبيعي.

object-fit: cover يميل إلى العمل في معظم المواقف لضمان استخدام واجهة موحدة ولطيفة عند التعامل مع البيانات مع صور ذات أبعاد مختلفة، فإنك تُفقد المعلومات بهذه الطريقة (يتم اقتصاص الصورة أطولها).

إذا كانت هذه التفاصيل مهمة (على سبيل المثال، عند استخدام طبقة مسطحة من منتجات التجميل)، ولا يتم قبول اقتصاص المحتوى المهم. لذلك سيكون السيناريو المثالي هو الصور سريعة الاستجابة أحجام مختلفة تناسب مساحة واجهة المستخدم دون اقتصاص.

الطريقة التقليدية القديمة: الحفاظ على نسبة العرض إلى الارتفاع باستخدام السمة `padding-top`

استخدام المساحة المتروكة لأعلى لضبط نسبة عرض إلى ارتفاع 1:1 في صور معاينة المشاركة داخل لوحة عرض دوّارة — استخدام `padding-top` لضبط نسبة عرض إلى ارتفاع 1:1 في صور معاينة المشاركة ضمن لوحة عرض دوّارة

لكي نجعلها أكثر استجابة، يمكننا استخدام نسبة العرض إلى الارتفاع. هذا يسمح لنا بوضع حجم نسبة معين ووضع باقي الوسائط على محور فردي (الارتفاع أو العرض).

وهو حل مقبول عبر المتصفحات حاليًا للحفاظ على نسبة العرض إلى الارتفاع استنادًا إلى واجهة العرض باسم "الحشو والهبوط من أعلى إلى أسفل". يتطلب هذا الحل حاوية رئيسية حاوية فرعية موضوعة بشكل كامل. حينئذ سيحسب أحدهما نسبة العرض إلى الارتفاع كنسبة مئوية لتعيين باسم 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`

استخدام نسبة العرض إلى الارتفاع لضبط نسبة عرض إلى ارتفاع 1:1 في صور معاينة المشاركة داخل لوحة عرض دوّارة — استخدام `aspect-ratio` لضبط نسبة عرض إلى ارتفاع 1:1 في صور معاينة المشاركة ضمن لوحة عرض دوّارة

إنّ احتساب قيم 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;
}

استخدام aspect-ratio بدلاً من padding-top أكثر وضوحًا، ولا يؤدي إلى تعديل المساحة المتروكة القيام بشيء خارج نطاقها المعتاد.

يتيح هذا الموقع الجديد أيضًا ضبط نسبة العرض إلى الارتفاع على auto، حيث "تستخدم العناصر التي تم استبدالها بنسبة عرض إلى ارتفاع أساسية نسبة العرض إلى الارتفاع هذه النسبة وإلا لا يكون للمربع نسبة عرض إلى ارتفاع مفضلة". إذا كانت قيمة كل من auto و<ratio> المحددان معًا، تكون نسبة العرض إلى الارتفاع المفضلة هي النسبة المحددة لـ width مقسومة على height ما لم أنه عنصر تم استبداله نسبة عرض إلى ارتفاع أساسية، وفي هذه الحالة يتم استخدام نسبة العرض إلى الارتفاع هذه بدلاً من ذلك.

مثال: الاتساق في الشبكة

يعمل هذا بشكل جيد مع آليات تخطيط CSS مثل CSS Grid و Flexbox أيضًا. وضع قائمة الأطفال الذين تريد المحافظة على نسبة عرض إلى ارتفاع تبلغ 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;
}

الصور في شبكة مع العنصر الرئيسي بأبعاد مختلفة لنسبة العرض إلى الارتفاع. الاطّلاع على عرض توضيحي حول Codepen

مثال: منع متغيّرات التصميم

ومن الميزات الأخرى الرائعة في aspect-ratio إمكانية إنشاء مساحة عنصر نائب لمنع متغيّرات التصميم التراكمية وتقديم مؤشرات أداء الويب بشكل أفضل. في هذه المرة الأولى على سبيل المثال، يؤدّي تحميل مادة عرض من واجهة برمجة تطبيقات مثل Unpush إلى إنشاء متغيّرات التصميم عند الانتهاء من تحميل الوسائط

فيديو لمتغيّرات التصميم التراكمي الذي يحدث في حال عدم ضبط نسبة عرض إلى ارتفاع على مادة عرض محمَّلة تم تسجيل هذا الفيديو باستخدام شبكة الجيل الثالث في وضع المحاكاة.

أمّا باستخدام aspect-ratio، فسيتم إنشاء عنصر نائب لمنع متغيّرات التصميم هذا:

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

يتم ضبط الفيديو بنسبة عرض إلى ارتفاع محدَّدة على مادة عرض محمَّلة. تم تسجيل هذا الفيديو باستخدام شبكة الجيل الثالث في وضع المحاكاة. الاطّلاع على عرض توضيحي حول Codepen

نصيحة إضافية: سمات الصور لنسبة العرض إلى الارتفاع

يمكنك أيضًا ضبط نسبة العرض إلى الارتفاع للصورة من خلال سمات الصور. إذا كنت تعرف أبعاد الصورة مسبقًا، من بين أفضل الممارسات ضبط هذه السمة على أنّها width وheight

في المثال أعلاه، بما أن أبعاده هي 800 بكسل × 600 بكسل، سيبدو ترميز الصور على النحو التالي: <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%;
}

وفي النهاية، يكون التأثير مطابقًا لضبط aspect-ratio على الصورة عبر CSS، ويتم تجنُّب متغيّرات التصميم التراكمية (راجِع العرض التوضيحي على رمز الترميز).

الخاتمة

مع خاصية aspect-ratio الجديدة في CSS، يتم إطلاقها في العديد من المتصفّحات الحديثة والحفاظ على أمان تصبح نِسب العرض إلى الارتفاع في حاويات الوسائط والتنسيقات أكثر وضوحًا.

صور إيمي شامبلين وليونيل "غوستاف" من خلال Unسبلاش