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