نسبة أبعاد ثابتة لعناصر HTML

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


لنأخذ المثال اليومي لصور المقالات المربعة ، التي لا تكون رسوماتها بالضرورة مربعة ، لكننا نرغب في عرضها بنسبة عرض إلى ارتفاع 1: 1 دون جهد إضافي وقبل كل شيء دون تشويه ، حيث يتغير عرضها (وبالتالي الارتفاع أيضًا) بشكل متجاوب ينبغي. باستخدام الكود التالي ، من السهل جدًا القيام بذلك بدون ترميز إضافي بمساعدة CSS:

1bc3a80de3db90cdf0535541236d95f2

ونتيجة ل

 

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

إذا كنت تريد نسبة عرض إلى ارتفاع تبلغ 16: 9 ، على سبيل المثال ، فإنك تختار عرض القيم: 100٪ ؛ المساحة المتروكة أسفل: 56.25٪ ؛. نسبة العرض إلى الارتفاع التي تأخذ النسبة الذهبية في الاعتبار هي العرض: 100٪ ؛ الحشو السفلي: 61.81٪ ؛ يمكن تحقيقه.

بمساعدة الحاسبة ، يمكنك تحديد نسبة العرض إلى الارتفاع مباشرة ، على سبيل المثال 16: 9 مع padding-bottom: calc (1 / (16/9) * 100٪). إذا كان العنصر يتكون من عناصر أخرى متداخلة ، فسيتم وضع العنصر الفرعي تمامًا للتعويض عن الحشو الخاص بالعنصر الأصل:

1bc3a80de3db90cdf0535541236d95f2

هذا يؤدي إلى النتيجة التالية:

...
عودة