نحوه استفاده
- برای تغییر اندازه، نسبت را وارد کنید (مثلاً 16 و 9) یا یک نسبت رایج را انتخاب کنید، سپس عرض یا ارتفاع را تایپ کنید. طرف دیگر محاسبه می‌شود.
- برای به دست آوردن نسبت، عرض و ارتفاع تصویر، صفحه یا ویدیو را وارد کنید.
- پیش‌نمایش را ببینید و اگر برای چیدمان وب به آن نیاز دارید، قانون aspect-ratio در CSS را کپی کنید.
نحوه کار
تغییر اندازه متناسب از رابطه ارتفاع = عرض × ارتفاع نسبت ÷ عرض نسبت (و برعکس آن) استفاده می‌کند. اندازه‌های پیکسل معمولاً عدد صحیح هستند، بنابراین نتیجه می‌تواند گرد شود؛ وقتی نسبتی به‌طور مساوی تقسیم نمی‌شود، مانند 16:9 در عرض 1000، ارتفاع گردشده (563) تقریبی نزدیک است و نه تطابق دقیق.
یک اندازه با تقسیم هر دو طرف بر بزرگ‌ترین مقسوم‌علیه مشترک ساده می‌شود: 1920 و 1080 مقسوم‌علیه مشترک 120 دارند و نتیجه 16:9 است. برخی اندازه‌های واقعی به نسبت شناخته‌شده‌ای ساده نمی‌شوند. 1366×768 دقیقاً 683:384 است که به 16:9 بسیار نزدیک است؛ بنابراین ابزار نزدیک‌ترین نسبت رایج را نیز وقتی اختلاف آن در محدوده 2 % باشد نشان می‌دهد. به همین ترتیب، نمایشگرهای «21:9» در واقع 64:27 (2560×1080) یا 43:18 (3440×1440) هستند؛ 21:9 یک نام بازاریابی است.
در CSS، aspect-ratio: 16 / 9 باعث می‌شود عنصر با تغییر عرض، همان شکل را حفظ کند؛ این ویژگی برای جاسازی ویدیو و جای‌نگه‌دار تصویر مفید است تا در حال بارگذاری چیدمان جابه‌جا نشود.
نمونه‌ها
اندازه تصویر بندانگشتی ویدیو
تصویر بندانگشتی 16:9 که باید 1280 پیکسل عرض داشته باشد، به 720 پیکسل ارتفاع نیاز دارد.
تشخیص نسبت نمایشگر
2560×1600 به 8:5 ساده می‌شود که همان 16:10 است و در لپ‌تاپ‌ها رایج است.
برش عمودی برای شبکه‌های اجتماعی
با نسبت 4:5 و عرض 1080، ارتفاع 1350 می‌شود؛ اندازه‌ای عمودی که بسیاری از فیدها می‌پذیرند.
پرسش‌های متداول
آیا 16:9 همان 1.78:1 است؟
بله. 16 ÷ 9 ≈ 1.778 است؛ بنابراین این دو همان شکل را توصیف می‌کنند. قالب‌های سینمایی اغلب به‌صورت اعشاری مانند 2.39:1 بیان می‌شوند.
چرا نتیجه من اعشار دارد؟
هر عرضی به‌طور مساوی بر نسبت تقسیم نمی‌شود. گرد کردن را برای اندازه‌های پیکسل فعال کنید؛ نتیجه نزدیک‌ترین پیکسل کامل خواهد بود که ممکن است کسری از پیکسل با نسبت دقیق اختلاف داشته باشد.
آیا ویژگی aspect-ratio در CSS همه‌جا کار می‌کند؟
در همه مرورگرهای اصلی فعلی پشتیبانی می‌شود. اگر عنصری هم عرض و هم ارتفاع آن به‌صورت صریح تعیین شده باشد، آن‌ها نسبت به aspect-ratio اولویت دارند.
حریم خصوصی
همه محاسبات در مرورگر شما انجام می‌شود. چیزی ارسال یا ذخیره نمی‌شود.