פעם שלחתי ערכת נושא של וורדפרס שבה כל תמונה שמוצגת בנייד נראתה כאילו עברה תקלה. פרצופים מתוחים, לוגו מעוך. הסיבה הייתה שלושה תווים בקובץ CSS: א height: 240px יושב ליד א width: 100%. בטלפון של 375 פיקסלים שהפיק יחס של בערך 1.56:1, והתמונות היו 16:9 - 1.78:1. לא הבדל עצום על הנייר. ברור מאוד על פנים אנושיות.
יחס גובה-רוחב הוא אחד מאותם דברים שמרגישים פשוטים מכדי לטעות, אז אף אחד לא בודק את זה פעמיים. זו חטיבה אחת. ובכל זאת זה הורס בשקט את יצוא הווידאו, תצוגות מקדימות של OpenGraph שנחתכות במקום הלא נכון, תמונות ממוזערות עם פסים שחורים ותמונות גיבורים שנראות בסדר על צג ה-27 אינץ' שלך ונורא בטלפון. המתמטיקה היא טריוויאלית; העלות של טעות עיגול אינה.
אני בונה Toolz.dev ואני עושה את החישוב הזה כל הזמן - גודל תמונות עבור תוסף 's מסכי מנהל, ייצוא וידאו בפורמט Reels, עובד מה בעצם צריכה להיות תמונת OpenGraph. אז בניתי את מחשבון יחס גובה-רוחב לעשות את זה בתחום אחד ולהראות את העבודה שלו תן לזה יחס ומימד אחד, זה נותן לך את השני תן לזה גודל, זה מקטין את זה ליחס ואומר לך איך קוראים ליחס הזה.
TL;DR: יחס גובה-רוחב הוא רוחב חלקי גובה, כתוב כשני מספרים עם נקודתיים. כדי למצוא גובה חסר:
width × (ratioHeight ÷ ratioWidth). כדי למצוא רוחב חסר:height × (ratioWidth ÷ ratioHeight). כדי לקבל את היחס מגודל, חלקו את שני המספרים במחלק המשותף הגדול ביותר שלהם - 1920 ו-1080 חולקים GCD של 120, מה שנותן 16:9. ה מחשבון יחס גובה-רוחב האם שלושתם בדפדפן שלך, עם הגדרות קבועות מראש ל-16:9, 9:16, 1:1, 4:3, 3:2, 21:9, 1.91:1 ו-2.39:1.
מהו יחס רוחב-גובה?
יחס רוחב-גובה הוא היחס היחסי בין תמונה' רוחב s וגובהו. הוא כתוב כשני מספרים המופרדים על ידי נקודתיים - 16:9, 4:3, 1:1 - ומה שהוא מתאר הוא צורה, לא גודל.
ההבחנה הזאת היא כל המשחק.1280 × 720, 1920 × 1080, ו 3840 × 2160 הם שלוש רזולוציות שונות עם יחס רוחב-גובה אחד הם אותה צורה בשלושה גדלים, וזו הסיבה שכל אחד מהם קשקשים לתוך כל אחר ללא עיוות או חיתוך בינתיים 1920 × 1080 ו 1920 × 1200 יש כמעט אותו רוחב, נבדלים ב 120 פיקסלים של גובה, והם צורות שונות באופן מהותי - אחד הוא 16:9, השני הוא 16:10, ומכניסים תוכן המיועד לאחד לתוך מיכל שנבנה עבור השני פירושו letterboxing או יבול.
היחס הוא רק רוחב ÷ גובה מבוטא כשבר במונחים הנמוכים ביותר. 1920 ÷ 1080 = 1.777..., והשבר 1920/1080 מצטמצם ל-16/9. שתיהן אותה עובדה שצוינה בשתי דרכים: הצורה העשרונית קלה יותר להשוואה (היא רחבה ב-1.78 מ-1.5? ברור), וצורת המעי הגס קלה יותר לומר.
שלושת החישובים שאתם בעצם צריכים
פתרון למימד חסר
מכירים את הצורה וצד אחד זהו המקרה הנפוץ ביותר בפועל: "I need a 16:9 image and my container is 1280 pixels wide - how tall?"
height = width × (ratioHeight ÷ ratioWidth)
= 1280 × (9 ÷ 16)
= 720
ובכיוון השני:
width = height × (ratioWidth ÷ ratioHeight)
= 1080 × (16 ÷ 9)
= 1920
במחשבון, בחר הגדרה מראש או הקלד את היחס שלך, מלא את הממד שאתה מכיר, השאר את השני ריק ולחץ על חשב. זה ממלא את השדה הריק ומציג את החשבון שמתחתיו.
הקטנת גודל ליחס שלו
יש לך גודל ואתה רוצה לדעת את צורתו - בדרך כלל כדי לבדוק ששני נכסים תואמים, או כדי להבין מהו בעצם ייצוא בעל מימד מסתורי של לקוח '.
השיטה היא המחלק המשותף הגדול ביותר מצא את המספר הגדול ביותר המחלק את שני הממדים באופן שווה וחלק את שניהם על ידו עבור 1920 ו-1080 המספר הזה הוא 120: 1920 § 120 = 16, 1080 0t0 120 = 9. יחס 16:9.
זה המקום שבו התשובות נעשות מעניינות, כי גדלים בעולם האמיתי עושים זאת לעתים קרובות לא להפחית ליחס ידידותי לשיווק צג 3440 × 1440 ultrawide מפחית ל 43:18. A 2560 × 1080 אחד מפחית ל 64:27. שניהם נמכרים כ "21:9", ואף אחד מהם למעשה - 21:9 לא יהיה 3360 × 1440 התווית היא עיגול של העשרוני (→2.39:1 ו →2.37:1) למשהו שנשמע מסודר ליד 16:9 המחשבון נותן לך את היחס המופחת האמיתי ואת העשרוני, כך שאתה יכול גודל מהמציאות ולא מגיליון מפרט.
קנה מידה והתאמה
שתי גרסאות של אותו רעיון. קנה מידה מכפיל את שני הממדים באותו גורם, אשר בהגדרה משמר את היחס - סולם 50% של 1920 × 1080 הוא 960 × 540, עדיין 16:9. התאמה מכווץ גודל מקור עד שהוא יושב בתוך קופסה תוחמת ללא עיוות: קח את הקטן מבין boxWidth ÷ sourceWidth ו boxHeight ÷ sourceHeight וקנה מידה על ידי זה. 4000 × 3000 תמונה המותאמת לתוך תיבת 1200 × 1200 הופך 1200 × 900. זה בדיוק מה CSS object-fit: contain עושה, ובדיוק מה ש-CDN של תמונה עושה כשאתה מבקש שינוי גודל של מימד מקסימלי.
תכונות עיקריות של מחשבון יחס גובה-רוחב
עשר הגדרות קבועות מראש, המסומנות עם המקום שבו הם משמשים בפועל
16:9 עבור וידאו סטנדרטי ורוב הצגים. 9:16 עבור סלילים, מכנסיים קצרים, TikTok, ו Stories.1:1 עבור פוסטים חברתיים מרובעים ואווטרים.4:3 עבור צגים ישנים יותר ו - iPad.3:2 עבור צילום DSLR ו 35mm film. 2:3 עבור הדפסי דיוקן.5:4 עבור הדפסי 8×10. 21:9 עבור ultrawide. 1.91:1 עבור OpenGraph קישור-תצוגה מקדימה תמונות. 2.39:1 עבור מסך רחב אנמורפי. מרחף מוגדר מראש אומר לך למה זה מיועד, מה שחשוב יותר מהמספר כאשר אתה מנסה לזכור איזה אינסטגרם רוצה.
הנוסחה תחת כל תשובה
לוח התוצאות מציג את החשבון המדויק - 1280 × (9 ÷ 16) = 720. חלקית כדי שתוכל לאמת אותו, חלקית כדי שתוכל להרים אותו לגיליון אלקטרוני או לסקריפט. אם אתה מתכוון לקוד קשיח מימד לקובץ CSS או להגדרת Tailwind, אתה אמור להיות מסוגל לראות מאיפה הגיע המספר.
היחס המופחת, העשרוני, והשם
כל תוצאה מדווחת על כל שלושת הייצוגים: היחס השלם המופחת (16:9), צורתו העשרונית (1.778:1), ושם נפוץ אם יש לו אחד. עשרוני הוא מה שאתה משווה מולו; השם הוא מה שאתה מקליד בבריף עיצוב.
מגה פיקסל וספירת פיקסלים כוללת
כל תוצאה כוללת את ספירת הפיקסלים במגה-פיקסלים זהו המספר שבעצם מנבא שימוש בזיכרון וגודל קובץ כאשר אתה משנה גודל של תמונות - תמונה של 4000 × 3000 היא 12 מגה פיקסל, והכפלת הממדים שלה מכפילה פי ארבעה את זה ל-48 מגה פיקסל, לא מכפילה את זה אם אתה מייצר ערכות תמונות רספונסיביות, הקשר הריבועי הזה הוא הדבר שיש לשמור בראשך כשתסיים לגודל, שינוי גודל תמונה ו קומפרס תמונה בצע את העבודה בפועל, בדפדפן.
תצוגה מקדימה של צורה חיה
מלבן בלוח התוצאות, נמשך ליחס שרק חישבת זה נשמע דקורטיבי וזה לא - הדרך המהירה ביותר לתפוס שהקלדת 9:16 כשהתכוונת ל-16:9 היא להסתכל על קופסה גבוהה כשציפית רחבה.
צד הלקוח, לא מקוון, ללא הרשמה
חשבון JavaScript רגיל בדפדפן שלך שום דבר לא נשלח לשום מקום, שום דבר לא נרשם, והדף ממשיך לעבוד עם הרשת כבוי.
באיזה יחס רוחב-גובה עלי להשתמש?
| יחס | עשרוני | איפה משתמשים בו | גודל פיקסל טיפוסי |
|---|---|---|---|
| 16:9 | 1.778 | YouTube, וידאו HD/4K, רוב המסכים, טלוויזיות | 1920×1080, 3840×2160 |
| 9:16 | 0.563 | סלילי אינסטגרם, TikTok, מכנסי YouTube קצרים, סיפורים | 1080×1920 |
| 1:1 | 1.0 | פוסטים של עדכון אינסטגרם, אווטרים, תמונות ממוזערות של מוצרים | 1080×1080 |
| 4:5 | 0.8 | פוסט עדכון דיוקן באינסטגרם (טביעת הרגל הגדולה ביותר של העדכון) | 1080×1350 |
| 1.91:1 | 1.91 | תצוגות מקדימות של קישור OpenGraph / Twitter Card | 1200×630 |
| 4:3 | 1.333 | אייפד, צגים ישנים יותר, חיישני מצלמה רבים | 2048×1536 |
| 3:2 | 1.5 | DSLR ותמונות סטילס ללא מראה, סרט 35 ממ, הדפסי תמונות | 6000×4000 |
| 21:9 (באמת ~2.37–2.39:1) | ~2.38 | מוניטורים אולטרה-ווידיים, גידולים קולנועיים | 3440×1440 |
| 2.39:1 | 2.39 | קולנוע אנמורפי עם מסך רחב | 4096×1716 |
שתי הערות מעשיות גודל OpenGraph 1200 × 630 מקטין ל 40:21, עשרוני של 1.905 - קרוב מספיק ל 1.91:1 שכולם קוראים לזה כך, וזה הגודל פייסבוק, לינקדאין, ו X כל render בצורה נקייה בדוק את התוצאה עם ה פתח תצוגה מקדימה של גרף כלי לפני שאתה שולח אותו, כי תמונת תצוגה מקדימה חתוכה בצורה גרועה היא הבאג הגלוי ביותר בקישור שאף אחד לא לוחץ עליו. ו-4:5 שווה לדעת עבור אינסטגרם במיוחד: הוא תופס יותר מקום אנכי בפיד מאשר 1:1, וזו תשומת לב חופשית.
מקרי שימוש נפוצים
גודל תמונות רספונסיביות ללא עיוות
אתה בונה רשת כרטיסים והעיצוב דורש תמונות ממוזערות של 16:9 ברוחב מיכל של 384 פיקסלים חשב: 384 × 9 ÷ 16 = 216. עכשיו יש לך גודל בטון עבור שני ה-CSS שלך aspect-ratio: 16 / 9 הצהרה וייצוא התמונה שלך, והם מסכימים אחד עם השני CSS מודרני עושה את זה קל יותר ממה שהיה פעם - aspect-ratio ב-CSS לוקח את היחס ישירות ונותן לדפדפן לעשות את החשבון - אבל אתה עדיין צריך את ממדי הפיקסלים עבור הנכס עצמו.
ייצוא וידאו לפלטפורמה ספציפית
אתה ירה 16:9 וצריך חיתוך אנכי 9:16 הגובה נשאר ב 1920, אז הרוחב הוא 1920 × 9 ÷ 16 = 1080. כלומר גודל הייצוא שלך - והסיבה המספרים נראים מוכרים היא כי 1080 × 1920 הוא פשוט 1920 × 1080 עם הצירים החליפו, וזה מה " וידאו אנכי" אומר.
דבר אחד המחשבון לא יעשה בשבילך: H.264 דורש ממדים זוגיים אם המתמטיקה שלך נוחתת על מספר אי זוגי, לעגל את הצד האי זוגי למטה בפיקסל אחד או המקודד שלך יסרב לעבודה.
להבין מהו בעצם נכס מסתורי
לקוח שולח נכסים ב 1440 × 1800 ושואל למה הם לחתוך רע בדף הבית צמצם את זה: GCD של 1440 ו 1800 הוא 360, נותן 4:5. חריצי דף הבית שלך הם 16:9. אלה שתי צורות לא יכול להיות שניהם מרוצים ללא חיתוך - עכשיו יש לך תשובה קונקרטית והחלטה לעשות, ולא תחושה מעורפלת שמשהו כבוי.
בדיקה שקבוצת נכסים עקבית
לפני השקה, הפעל כל תמונת גיבור & #39;s ממדים דרך מצב היחס. אם אחד משלושים חוזר כ-1.6:1 בעוד השאר הם 1.778:1, מצאת את הנכס שייראה שגוי בעדינות באתר החי, ומצאת אותו לפני שמשתמש עושה זאת.
הערות טכניות שכדאי לדעת
עיגול. רוב חישובי היחס לא נוחתים על פיקסלים שלמים.16:9 ברוחב של 1000 נותן גובה של 562.5. המחשבון מסתובב לפיקסל השלם הקרוב ביותר, כך שמקבלים 563 - צורה שהיא 1.7762:1 ולא 1.7778:1, הבדל של כעשירית האחוז, ובלתי נראה אל תרדוף אחריו שים לב לכך שעיגול עקבי למטה על פני ערכת תמונות יכול לצבור סחף גלוי אם אתה מערם אלמנטים; עגול מממד המקור בכל פעם ולא מהתוצאה הקודמת.
יחס גובה-רוחב של פיקסל לעומת יחס רוחב-גובה של תצוגה. ב וידאו שידור אלה יכולים להיות שונים: קטעי DV ישנים מאוחסנים 720 × 480 פיקסלים אבל הציג אותם כמו 4:3 על ידי הפיכת כל פיקסל לא מרובע כמעט שום דבר שאתה נוגע היום עושה את זה - הכל פיקסלים מרובעים - אבל אם אתה עובד עם קטעי מדור קודם והמתמטיקה מסרבת להוסיף, זו הסיבה.
aspect-ratio בcss. מאז 2021 אתה יכול לכתוב aspect-ratio: 16 / 9 ולתת לדפדפן להחזיק את הצורה בעוד מימד אחד הוא נוזל השתמש בו זה מסיר מחלקה שלמה של פריצות ריפוד-אחוז העליון כי היה צורך בעבר, וזה אומר הפריסה שלך נשאר נכון ברוחב אתה אף פעם לא בדק אתה עדיין רוצה את המחשבון עבור ייצוא הנכס, כי קובץ התמונה צריך להיות מספר אמיתי של פיקסלים.
חיתוך אינו קנה מידה. אם יחס מקור ויעד שונים, אינך יכול לשנות את הגודל ביניהם - עליך לחתוך, תיבת מכתבים או לעוות. בחר בכוונה. object-fit: cover יבולים (והוא בדרך כלל מה שאתה רוצה לתמונות), contain תיבות מכתבים (בדרך כלל מה שאתה רוצה עבור לוגו), ו fill מעוות (כמעט אף פעם לא מה שאתה רוצה, והגורם לבאג הפרצופים המעוותים שלי בראש מאמר זה).
שָׁוא
איך אני מחשב יחס רוחב-גובה מרוחב וגובה?
חלקו את שני המספרים במחלק המשותף הגדול ביותר שלהם. עבור 1920 × 1080 ה-GCD הוא 120, כך שהיחס מצטמצם ל-16:9. החלף את המחשבון הזה כדי לקבל מצב יחס, הזן את שני המידות, והוא עושה את ההפחתה ומציין עבורך את היחס.
איזה גובה אני צריך לתמונה של 16:9 ברוחב 1280 פיקסלים?
הכפל את הרוחב ב-9 וחלק ב-16: 1280 × 9 ÷ 16 = 720. אז תמונה של 16:9 ברוחב 1280 פיקסלים היא בגובה 720 פיקסלים. הזן את ההגדרה מראש של 16:9 ורוחב של 1280 כדי לאשר זאת.
מה ההבדל בין יחס רוחב-גובה לרזולוציה?
יחס גובה-רוחב הוא הצורה - הפרופורציה של רוחב לגובה רזולוציה היא ספירת הפיקסלים בפועל. 1280 × 720 ו-1920 × 1080 הן רזולוציות שונות עם אותו יחס רוחב-גובה של 16:9, וזו הסיבה שאחד משתנה לשני ללא עיוות או חיתוך.
באיזה יחס רוחב-גובה עלי להשתמש עבור מדיה חברתית?
השתמש ב-1:1 או 4:5 עבור פוסטים בפיד באינסטגרם, 9:16 עבור סלילים, סיפורים, TikTok ומכנסיים קצרים של YouTube, 16:9 עבור סרטון YouTube סטנדרטי ו-1.91:1 עבור פתח גרף תמונות תצוגה מקדימה של קישורים בפייסבוק, לינקדאין ו-X. ההגדרות המוגדרות מראש בכלי זה כוללות את כל אלה.
למה התמונה שלי שהשתנה נראית מתוחה?
הרוחב והגובה החדשים אינם תואמים את היחס המקורי, ולכן התמונה נמעכת לאורך ציר אחד חשב את גובה המטרה מרוחב המטרה שלך באמצעות היחס המקורי במקום להקליד את שני המספרים ביד - בדיוק בשביל זה נועד מצב פתרון-עבור-חסר-צד.
מה המשמעות של 21:9 בעצם?
זוהי תווית שיווקית עבור תצוגות ultrawide היחס האמיתי של צג 3440 × 1440 הוא 43:18, בערך 2.39:1, ופאנל 2560 × 1080 הוא 64:27. שניהם מקבלים מעוגל ל "21:9" ברשימות מוצרים אם אתה צריך מידות פיקסלים מדויקות, לחשב מרזולוציית הפאנל האמיתי ולא התווית.
איך אני שומר על יחס רוחב-גובה כשהתוצאה אינה מספר שלם?
המחשבון מתעגל אל הפיקסל השלם הקרוב ביותר, שמציג לכל היותר חצי פיקסל של סחיפה - בלתי נראה בפועל. מקודדי וידאו מחמירים יותר: H.264 דורש ממדים זוגיים, אז עיגל את הצד האי זוגי כלפי מטה בפיקסל אחד אם מקודד דוחה את הגודל שלך.
האם המחשבון הזה עובד במצב לא מקוון?
כן. כל חישוב הוא חשבון JavaScript רגיל שפועל בדפדפן שלך. לא נשלחים מידות לשרת, שום דבר לא נרשם, והכלי ממשיך לעבוד ללא חיבור לאינטרנט לאחר טעינת הדף.
כלים קשורים
- שינוי גודל תמונה- החל את המידות שזה עתה חישבת, בדפדפן
- קומפרס תמונה- כווץ את הקובץ ברגע שהצורה נכונה
- מחשבון אחוז- עבור חצי סולם באחוזים מהעבודה
- פתח תצוגה מקדימה של גרף- בדוק את התמונה של 1.91:1 לפני שאתה שולח את הקישור
- ממיר פורמט- - WebP ו-AVIF עבור הנכסים שהרגע גדלת
קריאה נוספת: המדריך המלא לדחיסת תמונה ו כלי תמונה חיוניים לאינטרנט.
