הגדלה של תמונות בפריסת רשת

יצירת רשת של תמונות היא קלה, הודות ל-CSS Grid. אבל לגרום לרשת לעשות דברים מפוארים לאחר התמונות הוצבו יכול להיות מסובך להוציא.

נניח שאתה רוצה להוסיף אפקט ריחוף מהודר לתמונות שבהן הן גדלות ולהגדיל מעבר לשורות והעמודות שבהן הן יושבות? אנחנו יכולים לעשות זאת!

מגניב נכון? אם תבדוק את הקוד, לא תמצא JavaScript, בוררים מורכבים או אפילו מספרי קסם. וזו רק דוגמה אחת מני רבות שנחקור!

בניית הרשת

קוד ה-HTML ליצירת הרשת הוא פשוט כמו רשימה של תמונות בתוך מיכל. אנחנו לא צריכים יותר מזה.

<div class="gallery">
  <img>
  <img>
  <img>
  <!-- etc. -->
</div>

עבור ה-CSS, ראשית אנו מתחילים בהגדרת הרשת באמצעות הפעולות הבאות:

.gallery {
  --s: 150px; /* controls the size */
  --g: 10px;  /* controls the gap */

  display: grid;
  gap: var(--g);
  width: calc(3*var(--s) + 2*var(--g)); /* 3 times the size plus 2 times the gap */
  aspect-ratio: 1;
  grid-template-columns: repeat(3, auto);
}

בקיצור, יש לנו שני משתנים, אחד ששולט בגודל התמונות ואחד שקובע את גודל הפער בין התמונות. aspect-ratio עוזר לשמור על פרופורציה.

אתה אולי תוהה מדוע אנו מגדירים רק שלוש עמודות אך ללא שורות. לא, לא שכחתי את השורות - אנחנו פשוט לא צריכים להגדיר אותן במפורש. CSS Grid מסוגל להציב פריטים באופן אוטומטי שורות ועמודות מרומזות, כלומר אנחנו מקבלים כמה שורות שצריך לכל מספר של תמונות שאנחנו זורקים עליו. אנחנו יכולים להגדיר במפורש את השורות במקום אבל אנחנו צריכים להוסיף grid-auto-flow: column כדי לוודא שהדפדפן יצור עבורנו את העמודות הדרושות.

הנה דוגמה להמחשת שני המקרים. ההבדל הוא שזורם ב-a row כיוון האחר ב-a column כיוון.

לבדוק המאמר השני שכתבתי למידע נוסף על הרשתות המרומזות ועל אלגוריתם המיקום האוטומטי.

עכשיו כשיש לנו את הרשת שלנו, הגיע הזמן לעצב את התמונות:

.gallery > img {
  width: 0;
  height: 0;
  min-height: 100%;
  min-width: 100%;
  object-fit: cover;
}

אפקט הריחוף שאנו יוצרים מסתמך על ה-CSS הזה. זה כנראה נראה לך מוזר שאנחנו יוצרים תמונות שאין להן גם רוחב וגם גובה, אבל יש להן רוחב וגובה מינימליים של 100%. אבל אתה תראה שזה טריק די מסודר למה שאנחנו מנסים להשיג.

מה שאני עושה כאן הוא אומר לדפדפן שצריכות להיות לתמונות 0 רוחב וגובה אבל גם צריך שיהיה גובה מינימלי שווה ל 100%… אבל 100% של מה? כאשר משתמשים באחוזים, הערך הוא יחסית למשהו אחר. במקרה זה, התמונה שלנו ממוקמת בתוך a תא רשת ואנחנו צריכים לדעת את הגודל הזה כדי לדעת מה זה 100% הוא יחסית ל.

תחילה הדפדפן יתעלם min-height: 100% כדי לחשב את גודל תאי הרשת, אבל זה ישתמש ב- height: 0 בחישוב שלה. זה אומר שהתמונות שלנו לא יתרמו לגודל תאי הרשת... כי מבחינה טכנית אין להם גודל פיזי. זה יביא לשלוש עמודות ושורות שוות המבוססות על גודל הרשת (שהגדרנו ב- .galleryרוחב ו aspect-ratio). הגובה של כל תא רשת אינו אלא המשתנה --s הגדרנו (זהה עבור הרוחב).

כעת, כשיש לנו את הממדים של תאי הרשת שלנו, הדפדפן ישתמש בו min-height: 100% (ו min-width: 100%) שיאלץ את התמונות למלא לחלוטין את החלל של כל תא רשת. כל העניין אולי נראה קצת מבלבל אבל הרעיון המרכזי הוא לוודא שהרשת מגדירה את גודל התמונות ולא להיפך. אני לא רוצה שהתמונה תגדיר את גודל הרשת ואתה תבין למה אחרי הוספת אפקט הרחף.

יצירת אפקט הריחוף

מה שאנחנו צריכים לעשות זה להגדיל את קנה המידה של התמונות כשהן מרחפות. אנחנו יכולים לעשות זאת על ידי התאמת תמונה width ו height on :hover:

.gallery {
  --f: 1.5; /* controls the scale factor */
}

.gallery img:hover{
  width:  calc(var(--s) * var(--f));
  height: calc(var(--s) * var(--f));
}

הוספתי משתנה מותאם אישית חדש, --f, לתערובת כגורם קנה מידה כדי לשלוט בגודל על ריחוף. שימו לב איך אני מכפיל את משתנה הגודל, --s, על ידי זה כדי לחשב את גודל התמונה החדש.

אבל אמרת שגודל התמונה צריך להיות 0. מה קורה? אני אבוד…

מה שאמרתי עדיין נכון אבל אני עושה חריג לתמונה המרחפת. אני אומר לדפדפן שרק תמונה אחת תהיה בגודל שאינו שווה לאפס - כך שהיא תתרום למימד הרשת - בעוד שכל האחרות יישארו שוות ל 0.

הצד השמאלי מציג את הרשת במצבה הטבעי ללא כל תמונות מרחפות, וזה מה שהצד הימני מראה. כל תאי הרשת בצד שמאל שווים בגודלם מכיוון שלכל התמונות אין ממדים פיזיים.

בצד ימין, התמונה השנייה בשורה הראשונה מרחפת, מה שנותן לה ממדים המשפיעים על גודל תא הרשת. הדפדפן יגדיל את תא הרשת הספציפי הזה עם ריחוף, מה שתורם לגודל הכולל. וכיון שגודל כל הרשת נקבע (כי קבענו קבוע width על .gallery), תאי הרשת האחרים יגיבו באופן הגיוני על ידי הפיכתם לקטנים יותר כדי לשמור על .galleryהגודל הכולל של בטקט.

זה אפקט הזום שלנו בפעולה! על ידי הגדלת הגודל של תמונה אחת בלבד אנו משפיעים על כל תצורת הרשת, ואמרנו קודם שהרשת מגדירה את גודל התמונות כך שכל תמונה נמתחת בתוך תא הרשת שלה כדי למלא את כל החלל.

לכך, אנו מוסיפים מגע של transition ואת השימוש object-fit כדי למנוע עיוות תמונה והאשליה מושלמת!

אני יודע שההיגיון מאחורי הטריק לא קל לתפיסה. אל תדאג אם אתה לא לגמרי מבין את זה. החשוב ביותר הוא להבין את מבנה הקוד המשמש וכיצד לשנות אותו כדי לקבל יותר וריאציות. זה מה שנעשה בהמשך!

הוספת תמונות נוספות

יצרנו רשת 3×3 כדי להסביר את הטריק העיקרי, אבל בטח ניחשתם שלא נצטרך לעצור שם. אנחנו יכולים להפוך את מספר העמודות והשורות למשתנים ולהוסיף כמה תמונות שנרצה.

.gallery {
  --n: 3; /* number of rows*/
  --m: 4; /* number of columns */
  --s: 150px; /* control the size */
  --g: 10px;  /* control the gap */
  --f: 1.5;   /* control the scale factor */

  display: grid;
  gap: var(--g);
  width:  calc(var(--m)*var(--s) + (var(--m) - 1)*var(--g));
  height: calc(var(--n)*var(--s) + (var(--n) - 1)*var(--g));
  grid-template-columns: repeat(var(--m),auto);
}

יש לנו שני משתנים חדשים עבור מספר השורות והעמודות. אז אנחנו פשוט מגדירים את הרוחב והגובה של הרשת שלנו באמצעותם. אותו דבר עבור grid-template-columns אשר משתמש --m מִשְׁתַנֶה. ובדיוק כמו קודם, אנחנו לא צריכים להגדיר במפורש את השורות מכיוון שתכונת המיקום האוטומטי של ה-CSS Grid תעשה את העבודה עבורנו, לא משנה בכמה רכיבי תמונה אנו משתמשים.

למה לא ערכים שונים לרוחב ולגובה? אנחנו יכולים לעשות זאת:

.gallery {
  --n: 3; /* number of rows*/
  --m: 4; /* number of columns */
  --h: 120px; /* control the height */
  --w: 150px; /* control the width */
  --g: 10px;  /* control the gap */
  --f: 1.5;   /* control the scale factor */

  display: grid;
  gap: var(--g);
  width:  calc(var(--m)*var(--w) + (var(--m) - 1)*var(--g));
  height: calc(var(--n)*var(--h) + (var(--n) - 1)*var(--g));
  grid-template-columns: repeat(var(--m),auto);
}

.gallery img:hover{
  width:  calc(var(--w)*var(--f));
  height: calc(var(--h)*var(--f));
}

אנחנו מחליפים --s עם שני משתנים, אחד עבור הרוחב, --wועוד אחד לגובה, --h. לאחר מכן אנו מתאימים את כל השאר בהתאם.

אז, התחלנו עם רשת עם גודל ומספר קבועים של אלמנטים, אבל אז יצרנו קבוצה חדשה של משתנים כדי לקבל כל תצורה שנרצה. כל שעלינו לעשות הוא להוסיף כמה תמונות שנרצה ולהתאים את משתני ה-CSS בהתאם. השילובים הם בלתי מוגבלים!

גלריית תמונות במסך מלא

מה לגבי גרסת מסך מלא? כן, זה גם אפשרי. כל מה שאנחנו צריכים זה לדעת אילו ערכים אנחנו צריכים להקצות למשתנים שלנו. אם אנחנו רוצים N שורות של תמונות ואנחנו רוצים שהרשת שלנו תהיה מסך מלא, אנחנו צריכים קודם לפתור לגובה של 100vh:

var(--n) * var(--h) + (var(--n) - 1) * var(--g) = 100vh

אותו היגיון עבור הרוחב, אבל באמצעות vw במקום vh:

var(--m) * var(--w) + (var(--m) - 1) * var(--g) = 100vw

אנחנו עושים את החישוב כדי לקבל:

--w: (100vw - (var(--m) - 1) * var(--g)) / var(--m)
--h: (100vh - (var(--n) - 1) * var(--g)) / var(--n)

בוצע!

זה אותו HTML המדויק אבל עם כמה משתנים מעודכנים שמשנים את הגודל וההתנהגות של הרשת.

שימו לב שהשמטתי את הנוסחה שקבענו בעבר על .gallery's width ו height והחליפו אותם ב 100vw ו 100vh, בהתאמה. הנוסחה תיתן לנו את אותה תוצאה אבל מכיוון שאנו יודעים איזה ערך אנו רוצים, נוכל לוותר על כל המורכבות הנוספת הזו.

אנחנו יכולים גם לפשט את --h ו --w על ידי הסרת הפער מהמשוואה לטובת זה:

--h: calc(100vh / var(--n)); /* Viewport height divided by number of rows */
--w: calc(100vw / var(--m)); /* Viewport width divided by number of columns */

זה יגרום לתמונה המרחפת לגדול קצת יותר מהדוגמה הקודמת, אבל זה לא עניין גדול מכיוון שאנחנו יכולים לשלוט בקנה המידה עם --f משתנה שאנו משתמשים בו כמכפיל.

ומכיוון שהמשתנים משמשים במקום אחד, אנחנו עדיין יכולים לפשט את הקוד על ידי הסרתם לגמרי:

חשוב לציין שהאופטימיזציה הזו חלה רק על הדוגמה של מסך מלא ולא על הדוגמאות שסקרנו. דוגמה זו היא מקרה מסוים שבו נוכל להפוך את הקוד לקל יותר על ידי הסרת חלק מעבודת החישוב המורכבת שהיינו צריכים בדוגמאות האחרות.

למעשה יש לנו את כל מה שאנחנו צריכים כדי ליצור את הדפוס הפופולרי של הרחבת לוחות:

בואו נחפור אפילו יותר עמוק

שמתם לב שגורם קנה המידה שלנו יכול להיות פחות מ 1? אנו יכולים להגדיר את גודל התמונה המרחפת להיות קטן יותר מ --h or --w אבל התמונה גדלה עם ריחוף.

גודל תא הרשת ההתחלתי שווה ל --w ו --h, אז למה ערכים קטנים יותר יוצרים את תא הרשת גדול? האם התא לא יקבל קטן יותר, או לפחות לשמור על הגודל ההתחלתי שלו? ומה הגודל הסופי של תא הרשת?

עלינו לחפור לעומק כיצד אלגוריתם ה-CSS Grid מחשב את גודל תאי הרשת. וזה כרוך בהבנת ברירת המחדל של CSS Grid יישור מתיחה.

הנה דוגמה להבנת ההיגיון.

בצד שמאל של ההדגמה, הגדרתי שתי עמודות עם auto רוֹחַב. אנו מקבלים את התוצאה האינטואיטיבית: שתי עמודות שוות (ושני תאי רשת שווים). אבל את הרשת הקמתי בצד ימין של ההדגמה, שם אני מעדכן את היישור באמצעות place-content: start, נראה שאין לו כלום.

DevTools עוזר להראות לנו מה באמת קורה בשני המקרים:

ברשת השניה, יש לנו שתי עמודות, אבל הרוחב שלהן שווה לאפס, כך שנקבל שני תאי רשת שקופסים בפינה השמאלית העליונה של מיכל הרשת. זה לֹא באג אבל התוצאה ההגיונית של יישור הרשת. כאשר אנו ממדים עמודה (או שורה) עם auto, זה אומר שהתוכן שלו מכתיב את הגודל שלו - אבל יש לנו ריק div בלי תוכן לפנות לו מקום.

אך מאז stretch הוא יישור ברירת המחדל ויש לנו מספיק מקום בתוך הרשת שלנו, הדפדפן ימתח את שני תאי הרשת באופן שווה כדי לכסות את כל השטח הזה. כך הרשת משמאל מתפתלת עם שני עמודים שווים.

מ המפרט:

שימו לב שערכים מסוימים של justify-content ו align-content יכול לגרום לרצועות להיות מרוחקות זו מזו (space-around, space-between, space-evenly) או לשנות את הגודל (stretch).

שימו לב ל"לשינוי גודל" שהוא המפתח כאן. בדוגמה האחרונה, השתמשתי place-content שהוא הקיצור של justify-content ו align-content

וזה קבור איפשהו בפנים אלגוריתם גודל הרשת מפרט:

שלב זה מרחיב מסלולים שיש להם א המכונית פונקציית גודל רצועה מקסימלית על ידי חלוקת כל חיובי שנותר, מוחלט מקום פנוי באופן שווה ביניהם. אם המקום הפנוי הוא סְתָמִי, אבל מיכל רשת יש מובהק רוחב/גובה מינימלי, השתמש בגודל זה כדי לחשב את המקום הפנוי עבור שלב זה במקום זאת.

"באופן שווה" מסביר מדוע אנו מסיימים עם תאי רשת שווים, אבל זה חל על "השטח הפנוי" וזה מאוד חשוב.

בואו ניקח את הדוגמה הקודמת ונוסיף תוכן לאחד מה- divs:

הוספנו ריבוע 50px תמונה. הנה המחשה של איך כל רשת בדוגמה שלנו מגיבה לתמונה הזו:

במקרה הראשון, אנו יכולים לראות שהתא הראשון (באדום) גדול יותר מהשני (בכחול). במקרה השני, גודל התא הראשון משתנה כך שיתאים לגודל הפיזי של התמונה בעוד התא השני נשאר ללא ממדים. השטח הפנוי מחולק שווה בשווה, אבל בתא הראשון יש יותר תוכן מה שהופך אותו לגדול יותר.

זו המתמטיקה כדי להבין את השטח הפנוי שלנו:

(grid width) - (gap) - (image width) = (free space)
200px - 5px - 50px = 145px 

לחלק בשניים - מספר העמודות - נקבל רוחב של 72.5px עבור כל עמודה. אבל אנחנו מוסיפים את גודל התמונה, 50px, לטור הראשון שמשאיר אותנו עם טור אחד ב 122.5px והשני שווה ל 72.5px.

אותו היגיון חל על רשת התמונות שלנו. לכל התמונות יש גודל שווה ל 0 (ללא תוכן) בזמן שהתמונה המרחפת תורמת לגודל - גם אם היא רק 1px - הפיכת תא הרשת שלו לגדול יותר מהאחרים. מסיבה זו, גורם קנה המידה יכול להיות כל ערך גדול מ 0 אפילו עשרוניות ביניהם 0 ו 1.

כדי לקבל את הרוחב הסופי של תאי הרשת, אנו עושים את אותו חישוב כדי לקבל את הדברים הבאים:

(container width) - (sum of all gaps) - (hovered image width) = (free space)

רוחב המכולה מוגדר על ידי:

var(--m)*var(--w) + (var(--m) - 1)*var(--g)

...וכל הפערים שווים ל:

(var(--m) - 1)*var(--g)

...ועבור התמונה המרחפת יש לנו:

var(--w)*var(--f)

אנחנו יכולים לחשב את כל זה עם המשתנים שלנו:

var(--m)*var(--w) - var(--w)*var(--f) = var(--w)*(var(--m) - var(--f))

מספר העמודות מוגדר על ידי --m ,אז אנחנו מחלקים את השטח הפנוי הזה שווה בשווה כדי לקבל:

var(--w)*(var(--m) - var(--f))/var(--m)

... מה שנותן לנו את הגודל של התמונות שאינן מרחפות. עבור תמונות מרחפות, יש לנו את זה:

var(--w)*(var(--m) - var(--f))/var(--m) + var(--w)*var(--f)
var(--w)*((var(--m) - var(--f))/var(--m) + var(--f))

אם ברצוננו לשלוט בגודל הסופי של התמונה המרחפת, נשקול את הנוסחה לעיל כדי לקבל את הגודל המדויק שאנו רוצים. אם, למשל, אנחנו רוצים שהתמונה תהיה גדולה פי שניים:

(var(--m) - var(--f))/var(--m) + var(--f) = 2

אז, הערך של מכפיל הסולם שלנו, --f, צריך להיות שווה ל:

var(--m)/(var(--m) - 1)

לשלושה טורים יהיה לנו 3/2 = 1.5 וזה גורם קנה המידה שהשתמשתי בו בהדגמה הראשונה של מאמר זה כי רציתי להפוך את התמונה לגדולה פי שניים על ריחוף!

אותו היגיון חל על חישוב הגובה ובמקרה שנרצה לשלוט בשניהם באופן עצמאי נצטרך לשקול שני גורמי קנה מידה כדי לוודא שיש לנו רוחב וגובה ספציפיים ברחף.

.gallery {
  /* same as before */
   --fw: 1.5; /* controls the scale factor for the width */
   --fh: 1.2; /* controls the scale factor for the height */

  /* same as before */
}

.gallery img:hover{
  width:  calc(var(--w)*var(--fw));
  height: calc(var(--h)*var(--fh));
}

עכשיו, אתה יודע את כל הסודות ליצור כל סוג של רשת תמונה עם אפקט ריחוף מגניב תוך שליטה על הגודל שאתה רוצה באמצעות המתמטיקה שסקרנו זה עתה.

גלישה את

בי המאמר אחרון, יצרנו רשת בעלת מראה מורכב עם כמה שורות של CSS שהשתמשו בתכונות הרשת המרומזות והמיקום האוטומטי של CSS Grid. במאמר זה, הסתמכנו על כמה תכסיסים של גודל רשת CSS כדי ליצור רשת מפוארת של תמונות שמתקרבות לרחף וגורמות לרשת להתכוונן בהתאם. כל זה עם קוד פשוט שקל להתאים באמצעות משתני CSS!

במאמר הבא נשחק בצורות! נשלב רשת CSS עם מסיכה ו-clip-path כדי לקבל רשת מפוארת של תמונות.