ویژگی نسبت ابعادی CSS

ویژگی CSS که به حفظ فاصله در طرح‌بندی‌های واکنش‌گرا کمک می‌کند.

اونا کراوتس

نسبت ابعاد

Browser Support

  • کروم: ۸۸.
  • لبه: ۸۸.
  • فایرفاکس: ۸۹.
  • سافاری: ۱۵.

Source

نسبت ابعاد تصویر معمولاً به صورت دو عدد صحیح و یک دونقطه در ابعاد عرض:ارتفاع یا x:y بیان می‌شود. رایج‌ترین نسبت‌های ابعاد برای عکاسی ۴:۳ و ۳:۲ هستند، در حالی که دوربین‌های فیلمبرداری و دوربین‌های مصرفی جدیدتر، معمولاً نسبت ابعاد ۱۶:۹ دارند.

دو تصویر با نسبت ابعاد یکسان. یکی ۶۳۴ در ۹۵۱ پیکسل و دیگری ۲۰۰ در ۳۰۰ پیکسل. هر دو نسبت ابعاد ۲:۳ دارند.
دو تصویر با نسبت ابعاد یکسان. یکی ۶۳۴ در ۹۵۱ پیکسل و دیگری ۲۰۰ در ۳۰۰ پیکسل. هر دو نسبت ابعاد ۲:۳ دارند.

با ظهور طراحی واکنش‌گرا، حفظ نسبت ابعاد برای توسعه‌دهندگان وب به طور فزاینده‌ای اهمیت پیدا کرده است، به خصوص که ابعاد تصویر متفاوت است و اندازه عناصر بر اساس فضای موجود تغییر می‌کند.

برخی از نمونه‌هایی که در آن‌ها حفظ نسبت ابعاد اهمیت پیدا می‌کند عبارتند از:

  • ایجاد iframe های واکنش گرا، که در آنها ۱۰۰٪ عرض والد باشد، و ارتفاع باید نسبت مشخصی از viewport باقی بماند.
  • ایجاد محفظه‌های نگهدارنده داخلی برای تصاویر، ویدیوها و جاسازی‌ها برای جلوگیری از طرح‌بندی مجدد هنگام بارگذاری و اشغال فضا توسط آیتم‌ها
  • ایجاد فضای واکنش‌گرا و یکنواخت برای تجسم داده‌های تعاملی یا انیمیشن‌های SVG
  • ایجاد فضای واکنش‌گرا و یکنواخت برای اجزای چند عنصری مانند کارت‌ها یا تاریخ‌های تقویم
  • ایجاد فضای واکنش‌گرا و یکنواخت برای تصاویر متعدد با ابعاد مختلف (می‌تواند در کنار object-fit استفاده شود)

تناسب شیء

تعریف نسبت ابعاد به ما در تعیین اندازه رسانه‌ها در یک زمینه واکنش‌گرا کمک می‌کند. ابزار دیگر در این زمینه، ویژگی object-fit است که به کاربران امکان می‌دهد توصیف کنند که چگونه یک شیء (مانند تصویر) درون یک بلوک باید آن بلوک را پر کند:

تجسم نمایشی متناسب با شیء
نمایش مقادیر مختلف object-fit . نسخه آزمایشی را در Codepen ببینید.

مقادیر initial و fill ، تصویر را برای پر کردن فضا دوباره تنظیم می‌کنند. در مثال ما، این باعث می‌شود تصویر فشرده و تار شود، زیرا پیکسل‌ها را دوباره تنظیم می‌کند. ایده‌آل نیست. object-fit: cover از کوچکترین بعد تصویر برای پر کردن فضا استفاده می‌کند و تصویر را بر اساس این بعد برش می‌دهد تا در آن جا شود. در پایین‌ترین مرز آن "بزرگنمایی" می‌کند. object-fit: contain تضمین می‌کند که کل تصویر همیشه قابل مشاهده باشد، و بنابراین برعکس cover است، جایی که اندازه بزرگترین مرز (در مثال ما در بالا این عرض است) را می‌گیرد و تصویر را تغییر اندازه می‌دهد تا نسبت ابعاد ذاتی آن را حفظ کند و در عین حال در فضا قرار گیرد. object-fit: none case تصویر را در مرکز آن (موقعیت پیش‌فرض شیء) در اندازه طبیعی آن برش می‌دهد.

object-fit: cover در بیشتر مواقع برای تضمین یک رابط کاربری یکنواخت و زیبا هنگام کار با تصاویر با ابعاد مختلف، مناسب است، با این حال، در این روش اطلاعاتی را از دست می‌دهید (تصویر از طولانی‌ترین لبه‌های خود برش می‌خورد).

اگر این جزئیات مهم باشند (مثلاً هنگام کار با چیدمان مسطح محصولات زیبایی)، برش محتوای مهم قابل قبول نیست. بنابراین سناریوی ایده‌آل، تصاویر واکنش‌گرا با اندازه‌های مختلف است که بدون برش، با فضای رابط کاربری متناسب باشند.

ترفند قدیمی: حفظ نسبت ابعاد با padding-top

استفاده از padding-top برای تنظیم نسبت ابعاد ۱:۱ در تصاویر پیش‌نمایش پست در یک carousel.
استفاده از padding-top برای تنظیم نسبت ابعاد ۱:۱ در تصاویر پیش‌نمایش پست در یک carousel.

برای اینکه این موارد را واکنش‌گراتر کنیم، می‌توانیم از نسبت ابعاد استفاده کنیم. این به ما امکان می‌دهد اندازه نسبت خاصی را تنظیم کنیم و بقیه رسانه‌ها را بر اساس یک محور جداگانه (ارتفاع یا عرض) قرار دهیم.

یک راه حل پذیرفته شده در حال حاضر برای حفظ نسبت ابعاد بر اساس عرض تصویر در مرورگرهای مختلف، به عنوان "هک Padding-Top" شناخته می‌شود. این راه حل به یک کانتینر والد و یک کانتینر فرزند که کاملاً در جای خود قرار گرفته باشد، نیاز دارد. سپس می‌توان نسبت ابعاد را به صورت درصد محاسبه کرد تا به عنوان padding-top تنظیم شود. به عنوان مثال:

  • نسبت ابعاد ۱:۱ = ۱ / ۱ = ۱ = padding-top: 100%
  • نسبت ابعاد ۴:۳ = ۳ / ۴ = ۰.۷۵ = padding-top: 75%
  • نسبت ابعاد ۳:۲ = ۲ / ۳ = ۰.۶۶۶۶۶ = padding-top: 66.67%
  • نسبت تصویر ۱۶:۹ = ۹ / ۱۶ = ۰.۵۶۲۵ = padding-top: 56.25%

حالا که مقدار نسبت ابعاد را مشخص کردیم، می‌توانیم آن را به کانتینر والد خود اعمال کنیم. مثال زیر را در نظر بگیرید:

<div class="container">
  <img class="media" src="..." alt="...">
</div>

سپس می‌توانیم CSS زیر را بنویسیم:

.container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.media {
  position: absolute;
  top: 0;
}

حفظ نسبت ابعاد با aspect-ratio

استفاده از aspect-ratio برای تنظیم نسبت ابعاد ۱:۱ در تصاویر پیش‌نمایش پست در یک اسلایدشو.
استفاده از aspect-ratio برای تنظیم نسبت ابعاد ۱:۱ در تصاویر پیش‌نمایش پست در یک اسلایدشو.

متأسفانه، محاسبه این مقادیر padding-top خیلی شهودی نیست و نیاز به سربار و موقعیت‌یابی اضافی دارد. با ویژگی جدید aspect-ratio در CSS ، زبان حفظ نسبت ابعاد بسیار واضح‌تر شده است.

با همان نشانه‌گذاری، می‌توانیم padding-top: 56.25% با aspect-ratio: 16 / 9 جایگزین کنیم و aspect-ratio روی نسبت مشخصی از width / height تنظیم کنیم.

استفاده از بالشتک بالا 
.container {
  width: 100%;
  padding-top: 56.25%;
}
استفاده از نسبت ابعاد 
.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

استفاده از aspect-ratio به جای padding-top بسیار واضح‌تر است و ویژگی padding را برای انجام کاری خارج از محدوده معمولش، دچار تغییر اساسی نمی‌کند.

این ویژگی جدید همچنین قابلیت تنظیم نسبت ابعاد را به auto اضافه می‌کند، که در آن «عناصر جایگزین شده با نسبت ابعاد ذاتی از آن نسبت ابعاد استفاده می‌کنند؛ در غیر این صورت کادر هیچ نسبت ابعاد ترجیحی ندارد.» اگر هم auto و هم <ratio> با هم مشخص شوند، نسبت ابعاد ترجیحی، نسبت width تقسیم بر height مشخص شده است، مگر اینکه عنصر جایگزین شده دارای نسبت ابعاد ذاتی باشد که در این صورت از آن نسبت ابعاد استفاده می‌شود.

مثال: سازگاری در یک شبکه

این روش با مکانیزم‌های طرح‌بندی CSS مانند CSS Grid و Flexbox نیز به خوبی کار می‌کند. فهرستی را در نظر بگیرید که شامل عناصر فرزند است و می‌خواهید نسبت ابعاد آن ۱:۱ باشد، مانند شبکه‌ای از آیکون‌های اسپانسر:

<ul class="sponsor-grid">
  <li class="sponsor">
    <img src="..." alt="..."/>
  </li>
  <li class="sponsor">
    <img src="..." alt="..."/>
  </li>
</ul>

.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.sponsor img {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: contain;
}
تصاویر در یک شبکه با عنصر والدشان در ابعاد نسبت ابعاد مختلف. نسخه آزمایشی را در Codepen ببینید.

مثال: جلوگیری از تغییر طرح‌بندی

یکی دیگر از ویژگی‌های عالی aspect-ratio این است که می‌تواند فضای نگهدارنده ایجاد کند تا از تغییر چیدمان تجمعی جلوگیری کند و Web Vitals بهتری ارائه دهد. در این مثال اول، بارگذاری یک دارایی از یک API مانند Unsplash پس از اتمام بارگذاری رسانه، یک تغییر چیدمان ایجاد می‌کند.

ویدئویی از تغییر چیدمان تجمعی که زمانی اتفاق می‌افتد که هیچ نسبت ابعادی روی یک فایل بارگذاری شده تنظیم نشده باشد. این ویدئو با یک شبکه 3G شبیه‌سازی شده ضبط شده است.

از سوی دیگر، استفاده از aspect-ratio یک placeholder ایجاد می‌کند تا از این تغییر طرح‌بندی جلوگیری کند:

img {
  width: 100%;
  aspect-ratio: 8 / 6;
}
ویدیویی با نسبت ابعاد مشخص روی یک فایل بارگذاری شده تنظیم شده است. این ویدیو با یک شبکه 3G شبیه‌سازی شده ضبط شده است. نسخه آزمایشی را در Codepen ببینید.

نکته اضافی: ویژگی‌های تصویر برای نسبت ابعاد

راه دیگر برای تنظیم نسبت ابعاد تصویر از طریق ویژگی‌های تصویر است. اگر ابعاد تصویر را از قبل می‌دانید، بهترین روش این است که این ابعاد را به عنوان width و height آن تنظیم کنید.

برای مثال بالا، با دانستن اینکه ابعاد تصویر ۸۰۰ پیکسل در ۶۰۰ پیکسل است، نشانه‌گذاری تصویر به این شکل خواهد بود: <img src="image.jpg" alt="..." width="800" height="600"> . اگر تصویر ارسال شده نسبت ابعاد یکسانی داشته باشد، اما لزوماً این مقادیر پیکسلی دقیقاً یکسان نباشند، می‌توانیم از مقادیر ویژگی تصویر برای تنظیم نسبت، همراه با سبک width: 100% استفاده کنیم تا تصویر فضای مناسبی را اشغال کند. در مجموع، این به شکل زیر خواهد بود:

<!-- Markup -->
<img src="image.jpg" alt="..." width="8" height="6">

/* CSS */
img {
  width: 100%;
  height: auto;
}

در نهایت، نتیجه مشابه تنظیم aspect-ratio تصویر از طریق CSS است و از تغییر چیدمان تجمعی جلوگیری می‌شود ( نسخه آزمایشی را در Codepen ببینید ).

نتیجه‌گیری

با ویژگی جدید aspect-ratio در CSS، که در مرورگرهای مدرن متعدد اجرا می‌شود، حفظ نسبت ابعاد مناسب در مدیا و layout containerها کمی ساده‌تر می‌شود.

عکس‌ها از ایمی شمبلن و لیونل گوستاو از طریق Unsplash.