بهعنوان یک توسعهدهنده وب، اغلب خود را در دوراهی کار با عناصر HTML میبینید که - بر خلاف عنصر img، مثلاً - نه اندازه ثابتی دارند و نه نسبت تصویر ثابتی دارند. اغلب می خواهید اطمینان حاصل کنید که این اشیاء پاسخگو هستند، اما تناسب بین عرض و ارتفاع حفظ می شود. به طور پیش فرض، CSS یک راه حل بصری در اینجا ارائه نمی دهد. اما با کمک ویژگی عمودی padding می توانید به هدف خود برسید.
بیایید مثال روزمره تصاویر مربعی محصولات را در نظر بگیریم. اگرچه خود گرافیکها لزوماً مربع نیستند، اما میخواهیم آنها را با نسبت ابعاد ۱:۱ و بدون هیچ تلاش یا اعوجاج اضافی نمایش دهیم و عرض (و بنابراین ارتفاع) آنها باید به صورت واکنشگرا تغییر کند. کد زیر دستیابی به این هدف را با استفاده از CSS و بدون هیچ نشانهگذاری اضافی آسان میکند.:
1bc3a80de3db90cdf0535541236d95f2
با نتیجه:
اما چرا این کار می کند و چگونه می توان نسبت های بعدی ایجاد کرد؟ کلید این امر در ویژگی padding نهفته است که - که در مقادیر درصد مشخص شده است - همیشه بر اساس همان مقدار اولیه خاصیت Width (یعنی عرض عنصر والد) است. این برای padding-left و padding-right واضح است، برای padding-top و padding-sat تعجب آور است، اما در این مورد بسیار مفید است.
به عنوان مثال اگر می خواهید نسبت ابعادی 16: 9 داشته باشید ، مقادیر عرض را انتخاب می کنید: 100٪؛ padding-bottom: 56.25٪؛. نسبت ابعادی که نسبت طلایی را در نظر می گیرد عرض است: 100٪ ؛ زیر بالشتک: 61.81٪؛ قابل تحقق
با کمک calc می توانید نسبت ابعاد را به طور مستقیم مشخص کنید ، به عنوان مثال برای 16: 9 با padding-bottom: calc (1 / (16/9) * 100٪). اگر این عنصر از عناصر تو در تو بیشتر تشکیل شود ، عنصر کودک کاملاً برای جبران بالشتک عنصر اصلی قرار می گیرد.:
1bc3a80de3db90cdf0535541236d95f2
این منجر به نتیجه زیر می شود: