ویژگی aspect-ratio در css یک ویژگی نسبتاً ساده است که مشکلات زیادی را در طراحی واکنش‌گرا در CSS حل می‌کند. در این مقاله کوتاه، من همه چیزهایی که شما نیاز دارید در مورد این ویژگی بدانید را توضیح خواهم داد (شامل ویژگی‌های کمتر شناخته شده).
aspect-ratio یک ویژگی ساده CSS است که به شما امکان می‌دهد هر المانی را در یک نسبت ابعاد خاص حفظ کنید، صرف‌نظر از اینکه به چه اندازه‌ای رشد می‌کند. این با قرار دادن نسبت عرض مورد نظر دنبال شده توسط / و سپس نسبت ارتفاع مورد نظر تعریف می‌شود. برای مثال، اگر میخواهید یک المان همیشه دارای نسبت ابعاد ۱۶:۹ باشد، باید از aspect-ratio: 16 / 9; استفاده کنید.
.element {
aspect-ratio: 16 / 9;
background-color: blue;
width: 50%;
}
تنها چیزی که باید از آن آگاه باشید این است که حداقل یک بعد (عرض یا ارتفاع) باید اندازه‌ای بر اساس auto داشته باشد. این موضوع کاملا بدیهی است زیرا اگر شما عرض و ارتفاع ثابتی را مشخص کنید، ویژگی aspect-ratio کاری انجام نخواهد داد.
.element {
/* کار نمی‌کند */
aspect-ratio: 16 / 9;
background-color: red;
width: 100px;
height: 100px;
}
به طور پیش‌فرض اگر هر دو اندازه بر روی auto تنظیم شده باشند، aspect-ratio ارتفاع را برای مطابقت با نسبت ابعاد تغییر می‌دهد و اجازه می‌دهد عرض هر اندازه‌ای که auto است باشد.
.element {
aspect-ratio: 3 / 1;
background-color: blue;
width: auto;
height: auto;
}
استفاده اساسی از aspect-ratio ۹۰٪ از موارد استفاده شما را پوشش می‌دهد، اما چند روش اضافی برای استفاده از این ویژگی وجود دارد که باید در مورد آنها آگاه باشید. اولین مورد این است که این ویژگی می‌تواند بدون مشخص کردن نسبت ارتفاع تعریف شود. اگر فقط نسبت عرض را مشخص کنید، نسبت ارتفاع به طور پیش‌فرض ۱ خواهد بود.
.element {
/* همان ۲ / ۱ */
aspect-ratio: 2;
background-color: blue;
width: 50%;
}
یک نکته جالب دیگر با aspect-ratio این است که شما می‌توانید مقدار auto را در کنار نسبت ابعاد خود مشخص کنید که این کار باعث می‌شود المان‌هایی مانند ویدیوها و تصاویر که نیاز به بارگذاری دارند، کارهای جالبی انجام دهند. در حالی که تصویر/ویدیو در حال بارگذاری است، المان نسبت ابعادی که مشخص کرده‌اید را دارد، اما پس از بارگذاری تصویر/ویدیو، المان به نسبت ابعاد تصویر/ویدیو تنظیم می‌شود.
.element {
aspect-ratio: auto 16 / 9;
background-color: blue;
}
با فرض اینکه خود تصویر دارای نسبت ابعاد ۱:۱ است.
این زمانی مفید است که میخواهید جایگاهی برای تصویر یا ویدیویی که در حال بارگذاری است، داشته باشید، اما سپس المان را به نسبت ابعاد واقعی تصویر/ویدیو تنظیم کنید.
ویژگی CSS با نام aspect-ratio یک ویژگی ساده است، اما کاربردهای زیادی دارد (به ویژه در طراحی واکنش‌گرا). همچنین، این ویژگی در تمام مرورگرهای اصلی در دسترس است، بنابراین می‌توانید از آن امروز بدون هیچ مشکلی استفاده کنید.
یک پاسخ
لبلبالالبالبا