כמפתח אינטרנט, קיימת סבירות גבוהה כי אתה נתקל שני אויבים של מאמר זה: תמונות ו מועדים . לפעמים, מסיבות מסוימות, התמונות שלך לא יתאימו לפריסה ואתה לא רוצה לעטוף את הראש במשך שעות.
המצב הזה קרה לי פעמים רבות ולמדתי מהטעויות שלי. אין עוד פריצות קסם שחורות - להלן חמש הטכניקות המועדפות עלי לטיפול בגודל שינוי התמונה.
בדרך "OMG אני צריך את זה בהקדם האפשרי"
השעה 17:00 ביום שישי, עליך לסיים את העמוד הזה, אך התמונות לא יתאימו לפריסה. הגיע הזמן להשתמש בטריק הקסמים שלכם!
.myImg { background-image: url("my-image.png"); background-size: cover; }נשמע מוכר? כולנו עשינו את זה פעם אחת, לא מרגיש כמו לרמות אתכם?
שימוש backgroundבתכונות הוא מאוד שימושי, הם פשוט עובדים. עם זאת, זכרו שעליכם להשתמש בהם רק לתמונות שאינן תוכן או כתחליף לטקסט ובמקרים מסוימים.
הדרך מהעתיד
מה אם הייתי אומר לך סוג זה של קסם קיים גם עבור
.myImg { object-fit: cover; width: 320px; height: 180px; }זה הכל אנשים! ראה כיצד כאשר אנו משיגים את הערך הידידותי cover, אנו יכולים גם להשתמש בו contain.
אוקיי מה המלכודת?
למרבה הצער object-fitלא יעבוד ב- IE ובגירסאות ישנות יותר של Safari, אך יש מילוי רב.
הדרך "נטפליקס"
אתה עשוי לחשוב "איש טריק נחמד, דרך נוספת שלא עובדת בדפדפנים ישנים כמו IE?". אל דאגה, זה עובד בכל מקום והוא המועדף עלי! יהיה עליך לעטוף את התמונה שלך עם הורה מרופד יחסית.
נשמור על יחס התמונה עם אחוז על paddingהנכס. התמונה שלך תהיה ילד מוחלט בגודל מלא.
הקוד נראה כך:
.wrapper { position: relative; padding-top: 56.25%; /* 16:9 Aspect Ratio */ } img { position: absolute; left: 0; top: 0; width: 100%; height: auto; }"היי גבר, זה נראה מסובך."
ברגע שאתה מקבל את הרעיון, הטכניקה היא פשוטה ונמצאת בשימוש נרחב. נטפליקס משתמשת בזה!
הדגמה קטנה:
הדרך הפשוטה
אולי כבר ידעת את זה:
img { height: auto; width: 100%; /* even more control with max-width */ max-width: 720px; }אם הפריסה שלך לא מסובכת מדי, זה עובד ברוב המקרים.
דרך הביצועים (מתקדם)
לפי ביצועים, אני מתכוון לזמני טעינה. תמונת גיבור גדולה יכולה להרוס אותה ולגרום לדף שלך להרגיש איטי, במיוחד במובייל.
האם ידעת שבדפדפנים מודרניים אתה יכול לשנות מקור תמונה בהתאם לרוחב העמוד שלך? בשביל srcsetזה מיועד!
אתה יכול לשלב אותם עם תג HTML 5 , המושפל בחן עם
לסיכום
- השתמש
background-imageאם התמונה שלך אינה חלק מתוכן הדף. - השתמש
object-fitאם לא אכפת לך מ- IE. - טכניקת המכולה המרופדת, בה משתמשים נטפליקס, עובדת בכל מקום.
- ברוב המקרים, פשוט הוסף
height: auto;את ה- CSS שלך. - אם אתה זקוק לזמני טעינה מהירים, השתמש
srcsetבכדי לטעון תמונות קטנות יותר בנייד.