ویژگی aspect-ratio در CSS یک ویژگی نسبتا ساده‌ای است که بسیاری از مشکلات طراحی ریسپانسیو را حل می‌کند. در این مقاله قصد داریم تا بیشتر با ویژگی aspect-ratio آشنا شویم و روش استفاده از آن را یاد بگیریم.

بررسی مفاهمی پایه‌ای ویژگی aspect-ratio در CSS

aspect-ratio یک ویژگی ساده CSS است که به ما این امکان را می‌دهد تا هر المنتی را مجبور کنیم صرف نظر از اینکه تا چه اندازه‌ای می‌تواند تغییر کند، در یک نسبت ابعادی خاص باقی بماند. این ویژگی با قرار دادن نسبت عرض مورد نظر به دنبال یک / و سپس نسبت ارتفاع مورد نظر تعریف می‌شود. به عنوان مثال، اگر می‌خواهیم یک المنت همیشه دارای نسبت ۱۶:۹ باشد، باید از aspect-ratio: 16 / 9; استفاده کنیم:

.element {
  aspect-ratio: 16 / 9;
  background-color: blue;
  width: 50%;
}

تنها چیزی که باید به آن توجه داشته باشیم این است که حداقل یک بُعد (width یا height) باید یک اندازه مبتنی بر auto داشته باشد. البته اگر عرض و ارتفاع دارای ابعاد مشخص باشند، ویژگی aspect-ratio کار خاصی انجام نمی‌دهد.

.element {
  /* Doesn't work */
  aspect-ratio: 16 / 9;
  background-color: red;
  width: 100px;
  height: 100px;
}

به‌طور پیش‌فرض، اگر هر دو اندازه روی auto تنظیم شده باشند، ویژگی aspect-ratio مقدار height را تغییر می‌دهد تا با نسبت تصویر مطابقت داشته باشد و اجازه می‌دهد که width دارای اندازه auto باشد.

.element {
  aspect-ratio: 3 / 1;
  background-color: blue;
  width: auto;
  height: auto;
}

بررسی مفاهیم پیشرفته‌تر ویژگی aspect-ratio در CSS

تسلط بر روی مفاهیم پایه‌ای ویژگی aspect-ratio تقریبا ۹۰٪ نیازهای ما را پوشش می‌دهد. اما چند روش بیشتر برای استفاده از این ویژگی وجود دارد که در ادامه درمورد آن‌ها صحبت می‌کنیم.

اولین مورد این است که می‌توانیم ویژگی aspect-ratio را بدون تعیین نسبت height تعریف کنیم. اگر فقط نسبت width را مشخص کنیم، نسبت height به طور پیش‌فرض ۱ خواهد بود.

.element {
  /* Same as 2 / 1 */
  aspect-ratio: 2;
  background-color: blue;
  width: 50%;
}

نکته جالب دیگری که در رابطه با این ویژگی وجود دارد این است که می‌توانیم مقدار auto را در کنار نسبت ابعادی که در ویژگی aspect-ratio داریم، تعریف کنیم که با المنت‌هایی مانند ویدیوها و تصاویری که باید در آن‌ها لود شوند، کارهای جالبی انجام می‌دهد. در حالی که تصویر یا ویدیویی که داریم در حال لود شدن است، المنت دارای نسبت ابعادی خواهد بود که ما مشخص کرده‌ایم، اما پس از لود شدن، ابعاد المنت مورد نظر با نسبت تصویر یا ویدیو تنظیم می‌شود.

.element {
  aspect-ratio: auto 16 / 9;
  background-color: blue;
}

این مورد زمانی که می‌خواهیم برای تصویر یا ویدیویی که در حال لود شدن است، یک placeholder داشته باشیم، بسیار مفید می‌باشد. اما پس از لود شدن، المنت را به نسبت واقعی تصویر یا ویدیو تنظیم می‌کنیم.

جمع‌بندی

ویژگی aspect-ratio در CSS یک ویژگی ساده است، اما در طراحی‌ وب‌سایت‌ها، به ویژه در طراحی‌های ریسپانسیو، کاربرد بسیار زیادی دارد. همچنین، تمام مرورگرهای اصلی موجود از این ویژگی پشتیبانی می‌کنند، بنابراین می‌توانیم بدون هیچ مشکلی از آن استفاده کنیم.