כמעט כל אתר שאני בונה כולל אזור של ליסטינג, לרוב באמצעות Jet Engine. למשל אזור המלצות, פוסטים, תצוגת פרויקטים, או כל דבר אחר שמוצג בגריד של כמה פריטים.
אמנם אלמנטור מאפשר לנו להגדיר גובה קבוע לכל התמונות, אבל זה לא שומר על היחס (הפרופציה של התמונה) ואז יכול לקרות מצב שבו תמונה רוחבית בדסקטופ תוצג בצורה של ריבוע בנייד ותחתוך לנו חלקים חשובים בתמונה כמו למשל פנים של הדמות המרכזית בתמונה.
ככה נראית עריכת תמונה באלמנטור:
הפתרון: aspect-ratio
וזו בדיוק הנקודה שבה נכנסת השורה האחת (טוב נו, כמעט אחת, תפסתם אותי) של CSS שאני כמעט תמיד מוסיף:
selector img {
aspect-ratio: 16 / 9;
object-fit: cover;
}
Code language: CSS (css)מה עושה aspect-ratio?
- מאפשר להגדיר את היחס בין הרוחב לגובה של אלמנט – בלי להגדיר גובה ספציפי.
- בדוגמה שלנו (16 / 9) כל תמונה תישאר ביחס מלבני.
- אם הרוחב משתנה (בגלל רספונסיביות), הגובה יתעדכן אוטומטית לפי היחס שהגדרנו.
ומה עושה object-fit: cover?
הבעיה עם aspect-ratio בלבד היא שיכול להיווצר "חלל ריק" סביב התמונה או למתוח אותה בצורה לא נכונה. השורה הזאת מטפלת בזה. אפשרות אחרת היא להגדיר במקום ״cover״ את המילה "contain" ואז כל התמונה תופיע.
התוצאה: תמונות שתמיד שומרות על יחס-שווה.
וזה הכל, ככה יצרנו אתר שהוא יותר Dummy Proof ונוח לתפעול.
רגע, מה זה Dummy Proof?
הכוונה היא לבנות אתר בצורה חכמה ועמידה לטעויות, כך שגם אם מישהו שאין לו מושג בטכנולוגיה יעלה תמונה חדשה או יעדכן תוכן העיצוב לא יישבר.
הקוד שהוספנו שומר על מראה אחיד גם אם הועלתה תמונה מוזרה ובכך משפר את חוויית המשתמש של מי שמתפעל את האתר.
בהצלחה!
2 תגובות
תודה רבה
תודהתודהתודה