خاصية نسبة العرض إلى الارتفاع في CSS

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

Una Kravets

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

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

Browser Support

• 88
• 88
• 89
• 15

Source

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

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

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

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

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

Object-fit

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

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

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

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

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

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

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

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

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

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

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

باستخدام الترميز نفسه، يمكننا استبدال padding-top: 56.25% بـ aspect-ratio: 16 / 9، مع ضبط aspect-ratio على نسبة محدّدة من width / height.

استخدام padding-top

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

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

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

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

تتيح هذه السمة الجديدة أيضًا إمكانية ضبط نسبة العرض إلى الارتفاع على 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 أنّه يمكنه إنشاء مساحة عنصر نائب لمنع حدوث انتقال تنسيق تراكمي وتقديم مؤشرات Web Vitals أفضل. في المثال الأول، يؤدي تحميل مادة عرض من واجهة برمجة تطبيقات، مثل Unsplash، إلى حدوث تغيير في التنسيق عند انتهاء تحميل الوسائط.

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

من ناحية أخرى، يؤدي استخدام 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%;
  height: auto;
}

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

الخاتمة

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

الصور من إيمي شامبلين وليونيل غوستاف عبر Unsplash.