איך להשתמש בו
- כדי לשנות גודל, הזן את היחס (למשל 16 ו-9) או בחר יחס נפוץ, ואז הקלד רוחב או גובה. הצד השני מחושב.
- כדי למצוא יחס, הזינו את הרוחב והגובה של תמונה, מסך או סרטון.
- בדקו את התצוגה המקדימה והעתיקו את כלל ה-CSS aspect-ratio אם אתם צריכים אותו לפריסת אתר.
איך זה עובד
שינוי גודל פרופורציונלי משתמש בגובה = רוחב × גובה היחס ÷ רוחב היחס (ולהיפך). גדלי פיקסלים הם בדרך כלל מספרים שלמים, לכן ניתן לעגל את התוצאה; כשהיחס אינו מתחלק שווה, למשל 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.
פרטיות
כל החישובים מתבצעים בדפדפן שלכם. שום דבר לא נשלח או נשמר.