باعتبارك مطور ويب، غالبًا ما تجد نفسك في معضلة العمل باستخدام عناصر 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
هذا يؤدي إلى النتيجة التالية: