לאחרונה נתקלתי מספר פעמים בשאלה איך לבנות רכיב שמכיל תמונה, כאשר לפעמים התשובה היא "יש להשתמש בimg" ולפעמים התשובה היא להשתמש בdiv עם הגדרת background-image. בפוסט הזה נפרט קצת על ההבדלים ביניהם, ונלמד מתי כדאי להשתמש בכל הגדרה

שימוש בתגית img

לכל תמונה שמוטמעת בעמוד יש רוחב וגובה כלשהם, אלו האורך והרוחב המקוריים שלה. כאשר אנחנו משתמשים בתגית של תמונה, כברירת מחדל התמונה תופיע בגודל המקורי. אם נניח, וניתן לתמונה שלנו הגדרת רוחב, וללא הגדרת גובה, או לחילופין height: auto – התמונה תגדל/תתכווץ לרוחב שהגדרנו, והגובה שלה יגדל/יקטן בהתאמה.

נניח שיש לנו תמונה באורך וברוחב של 100 פיקסלים. הגדרנו לה רוחב של 150 פיקסלים, וכן height: auto – כעת הן הרוחב והן הגובה יהיו 150 פיקסלים. כלומר – הגובה יודע להתאים את עצמו באופן אוטומטי, בהתאם לרוחב.

וכן להיפך – אם נגדיר לתמונה width: auto, height: 25px – הרי שכעת גם האורך וגם הרוחב יהיו לנו 25 פיקסלים. הגובה יהיה 25 פיקסלים – כי זה מה שהוגדר לו, והרוחב יהיה 25 פיקסלים כי זו תמונה ריבועית, ולא הוגדר רוחב אחר, לכן הרוחב יתאים את עצמו לגובה, לפי היחס המקורי של רוחב/גובה.

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

אם ניתן לתמונה כזו לצורך העניין width: 100%; height: 300px – הרי שיש מצבים שהיא תאבד את הפרופורציה שלה ותראה מעוותת. אם ניתן כדוגמה תמונה בגודל של 1000 פיקסלים רוחב, ו300 פיקסלים גובה – הרי שבמסך ברוחב של 1000 פיקסלים – התמונה תתאים במדויק ותראה נהדר, אבל במסכים רחבים של 1920 פיקסלים רוחב – התמונה תהיה מתוחה מאד, ותאבד לחלוטין את הפרופורציה שלה.

ההגדרה Object-fit

עבור מקרים כאלה נועדה ההגדרה object-fit בCSS. ההגדרה הזו מאפשרת לנו להגדיר תמונה עם גובה ורוחב, ואז את ההתנהגות של התמונה, במידה והגודל המקורי לא תואם את הגודל הנדרש. ההגדרה object-fit מקבלת את הערכים הבאים:

בדוגמה שלהלן תוכלו לראות את ההתנהגות השונה של ההגדרות השונות (ממליצה לפתוח במסך מלא כדי לחוות את ההתנהגות באופן המיטבי):

העניין הבעייתי היחיד עם ההגדרה object-fit היא תמיכת הדפדפנים שלה. לפי האתר can i use ההגדרה עדיין לא נתמכת בדפדפן internet explorer,לכן אם ישנה דרישה שהאתר ייתמך באופן מלא גם בדפדפן IE – לא תוכלו להסתמך על ההגדרה object-fit. בשביל זה יש את ההגדרה background-image.

background-image + background-size

על האפשרות של הגדרת תמונה כרקע של אלמנט HTML כלשהו – דברנו בהרחבה בפוסט על ההגדרה background, תוכלו לחזור לשם ולקרוא על האפשרויות השונות של background-size.

אז מה עדיף – img או background-image?

קודם כל – כאשר יש לנו תמונה שצריכה להיות בגודל המקורי שלה, או יותר נכון, ביחס הרוחב/גובה שלה, כמו אייקונים, תמונת לוגו וכדו' – יש עדיפות מובהקת לשימוש בתגית img.

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

בכל המקרים הללו – במידה ואנחנו לא צריכים לתת תמיכה מלאה לדפדפן IE – שוב עדיף להשתמש בתגית img עם ההגדרה object-fit ולא בbackground-image, כי לתגית img אפשר לתת את ההגדרות alt + title לצורך סריקה פשוטה של מנועי חיפוש.

שימו לב שבמקרה של למשל באנר, שיש עליו רכיבים נוספים מלבד תמונת הרקע, לדוגמה כותרת העמוד וכדו' – יש להגדיר את התמונה עם הגדרת הcss של position: absolute, כדי שלא תפריע לשאר האלמנטים. זה אמור להיות כך שלdiv שעוטף את הבאנר יש גובה (בפיקסלים למשל), וכן יש לו position: relative, בתוכו יש תגית img, עם ההגדרות הבאות:

 position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;

את ההגדרה z-index אנחנו מגדירים כדי שהתמונה לא תעלה מעל התוכן שבתוך הבאנר. (רוצים לדעת למה היא עשויה לכסות את התוכן? קראו עוד על ההגדרה position).

אבל אם אין לנו ברירה ואנחנו כן צריכים לתמוך בדפדפן IE, או שמדובר בתמונות רקע שאינן חשובות מידי, או שסתם לא בא לנו להתברבר עם תמונה אבסולוטית וכו' – נעדיף להשתמש בהגדרה background-image. כמובן ניתן גם הגדרת גודל לפי הנדרש, בדרך כלל cover.

זוכרים שלתגית img יש לנו אפשרות להגדיר גובה אוטומטי, כך שהוא יגדל/יקטן ככל שהרוחב גדל/קטן? ההתנהגות הזו היא בלעדית רק לתגית img ולא קורית לאלמנט הdiv שלנו, זה עם תמונת הרקע. כדי לתת לאלמנט שלנו גובה אוטומטי ביחס לרוחב – נוכל להשתמש בpadding-top כפי שמוסבר בפוסט הזה.

בהצלחה רבה!

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *