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

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

aspect-ratio یک ویژگی ساده CSS است که به ما این امکان را می‌دهد تا هر المنتی را مجبور کنیم صرف نظر از اینکه تا چه اندازه‌ای می‌تواند تغییر کند، در یک نسبت ابعادی خاص باقی بماند. این ویژگی با قرار دادن نسبت عرض مورد نظر به دنبال یک

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.element {
aspect-ratio: 16 / 9;
background-color: blue;
width: 50%;
}
.element { aspect-ratio: 16 / 9; background-color: blue; width: 50%; }
.element {
  aspect-ratio: 16 / 9;
  background-color: blue;
  width: 50%;
}

تنها چیزی که باید به آن توجه داشته باشیم این است که حداقل یک بُعد (

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.element {
/* Doesn't work */
aspect-ratio: 16 / 9;
background-color: red;
width: 100px;
height: 100px;
}
.element { /* Doesn't work */ aspect-ratio: 16 / 9; background-color: red; width: 100px; height: 100px; }
.element {
  /* Doesn't work */
  aspect-ratio: 16 / 9;
  background-color: red;
  width: 100px;
  height: 100px;
}

به‌طور پیش‌فرض، اگر هر دو اندازه روی

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.element {
aspect-ratio: 3 / 1;
background-color: blue;
width: auto;
height: auto;
}
.element { aspect-ratio: 3 / 1; background-color: blue; width: auto; height: auto; }
.element {
  aspect-ratio: 3 / 1;
  background-color: blue;
  width: auto;
  height: auto;
}

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

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

اولین مورد این است که می‌توانیم ویژگی aspect-ratio را بدون تعیین نسبت

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.element {
/* Same as 2 / 1 */
aspect-ratio: 2;
background-color: blue;
width: 50%;
}
.element { /* Same as 2 / 1 */ aspect-ratio: 2; background-color: blue; width: 50%; }
.element {
  /* Same as 2 / 1 */
  aspect-ratio: 2;
  background-color: blue;
  width: 50%;
}

نکته جالب دیگری که در رابطه با این ویژگی وجود دارد این است که می‌توانیم مقدار

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.element {
aspect-ratio: auto 16 / 9;
background-color: blue;
}
.element { aspect-ratio: auto 16 / 9; background-color: blue; }
.element {
  aspect-ratio: auto 16 / 9;
  background-color: blue;
}

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

جمع‌بندی

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