תמונה רספונסיבית היא כזו שיכולה להתאים את עצמה למכשירים שונים, ללא קשר לגדלי המסך. תמונה רספונסיבית באתר הפכה להיות כל כך מכרעת בימינו. מכיוון שהוא לא רק מאיץ את האתר אלא גם מציע חווית משתמש מגניבה בכל המכשירים. תמונות רספונסיביות ישתנו גם על ידי שינוי גודל הדפדפן.
תמונות רספונסיביות מסתגלות ביעילות לגדלי מסך שונים במכשירים שונים. זה מבטיח שהאיכות נשמרת. אתר רספונסיבי עם תמונות רספונסיביות בוודאי מגדיל את המעורבות ואת אחוזי ההמרה. ניתן להפוך תמונות לרספונסיביות באמצעות CSS יחד עם שאילתות מדיה.
כתיבה זו תשתמש ב-HTML ו-CSS כדי להפוך את התמונות לרספונסיביות.
איך להפוך תמונות לרספונסיביות עם HTML ו-CSS?
כדי להפוך תמונות לרספונסיביות באמצעות HTML ו-CSS, בצע את השלבים הבאים:
שיטה 1: השתמש במאפיין 'מקסימום רוחב'.
השיטה הראשונה לעשות תמונה מגיבה היא באמצעות ' רוחב מקסימלי ' תכונה. ה ' רוחב מקסימלי 'מאפיין משמש להגדרת הרוחב המרבי של התמונה. במקרה שהתוכן חורג מהרוחב המרבי, זה ישנה את גובה האלמנט.
צור HTML
כדי להוסיף קובץ תמונה בתג
של HTML, המשתמשים צריכים להשתמש בתגהוסף CSS
כעת, צור קובץ CSS חיצוני שמור אותו עם ה-'. css ' סיומת הקובץ, וקשר אותו בתוך תג
של קובץ ה-HTML. כדי לסגנן את קובץ התמונה בקובץ ה-CSS, התחל בתגית img ופתח את הפלטה המתולתלת. לאחר מכן, בתוך הפלטה המתולתלת, הוסף את ' רוחב מקסימלי: 100% ;' כדי להתאים את התמונה אופקית בתוך המיכל. יתר על כן, זה ימנע את חיתוך התמונות. לאחר מכן, הוסף ' גובה: אוטומטי ;' כדי להתאים את הגובה באופן אוטומטי, כך שהתמונה תוצג כהלכה:img {
רוחב מקסימלי : 100% ;
גוֹבַה : אוטומטי ;
}
שנה את גודל חלון הדפדפן כדי לבדוק את קנה המידה של התמונה.
שיטה 2: השתמש במאפיין 'רוחב'.
שיטה נוספת להפיכת תמונה לתגובה היא על ידי שימוש בנכס ' רוֹחַב '. הרכוש ' רוֹחַב ' מגדיר את הרוחב עבור התמונות והטקסט. הוא אינו מכיל שוליים, ריפוד או גבולות. זה יכול להגדיר את גודל התמונות והטקסט בצורה cm, px או %. כדי להפוך תמונה מגיבה, פשוט הקצה את ' רוֹחַב 'נכס ל' 100 %'. הגדרה ' רוחב: 100% ;' פירושו שהופך את התמונה לגדולה כמו אלמנט האב:
img {רוֹחַב : 100% ;
גוֹבַה : אוטומטי ; }
האמור לעיל מאשר שהתמונה מגיבה. כדי לבדוק אם הוא מגיב או לא, פשוט שנה את גודל חלון הדפדפן.
שיטה 3: החל שאילתות מדיה
שאילתות מדיה של CSS עוזרות למשתמשים לשנות את המראה של דף אינטרנט. שאילתת מדיה CSS מכילה תנאים, בכל פעם שהתנאים הללו מתקיימים, היא תשנה את מראה המכשיר או הדפדפן. שאילתות מדיה יכולות גם לעזור למשתמשים ביצירת תמונות רספונסיביות. מסיבה זו, ראשית, ציין את ה-'@ כְּלֵי תִקְשׁוֹרֶת ' תג ולאחר מכן ציין את ' רוחב מקסימלי ” מאפיין ולהקצות את הרוחב המרבי לתמונה בתוך הסוגרים. בכל פעם שתנאי זה יעמוד התמונה תקבל תגובה. לאחר מכן, הוסף את הפלטה המתולתלת ציין את תג ה-img, וציין את ' רוחב: 100% ;' ערך:
@כְּלֵי תִקְשׁוֹרֶת ( רוחב מקסימלי : 480 פיקסלים ) {img {
רוֹחַב : 100% ;
}
}
הערה : התמונה תהיה מגיבה רק אם היא עומדת בתנאי שצוין.
שאילתת המדיה של CSS הוחלה, וכעת התמונה תתנהג כמו תגובה אם היא משתנה לגודל התמונה שצוין. אחרת, זה לא יהיה מגיב:
סיכום
כדי להפוך תמונות לרספונסיביות עם HTML ו-CSS, למשתמשים יש שיטות שונות. שיטות אלו כוללות הפיכת תמונות לרספונסיביות באמצעות ' רוחב מקסימלי ' תכונה, ' רוֹחַב ” מאפיין, וגם על ידי יישום שאילתת המדיה של CSS. מאמר זה הציג למשתמשים את הפתרון המלא להפיכת תמונות לרספונסיביות.