div שווה צלעות עם רוחב שמוגדר באחוזים

הנושא בפורום 'קהילת מפתחי אתרי אינטרט' פורסם ע"י איש פשוט, ‏7/10/18.

  1. איש פשוט

    איש פשוט משתמש רשום

    הצטרף:
    ‏12/7/12
    הודעות:
    277
    תודות :
    0
    נקודות:
    17
    האם יש אפשרות ליצור div שהרוחב שלו יהיה מוגדר באחוזים והגובה שלו ישמור תמיד על שוויון לרוחב (יהיה שווה צלעות) גם כאשר הרוחב משתנה כתוצאה מהקטנת המסך?
    תודה.
     
  2. נטול עץ

    נטול עץ משתמש מקצוען פיתוח / אפיון / עיצוב אתרים

    הצטרף:
    ‏25/11/16
    הודעות:
    227
    תודות :
    216
    נקודות:
    59
    אתה יכול, ב JS כמובן, לכתוב פונקציה שמקבלת את רוחב ה div ומגדירה את גובה ה div עם אותם פרמטרים.

    בנוסף להאזין לאירוע onresize שמוצמד ל body/window ולקרוא לאותה הפונקציה, כך בכל שינוי גודל של הדף זה שוב יגדיר את הגובה מחדש.

    https://plnkr.co/edit/oIqiH9tuGp6EqHvZD6JE?p=preview
     
    נערך לאחרונה ב: ‏7/10/18
    עיטורים פלוס ו-איש פשוט אוהבים את זה.
  3. איש פשוט

    איש פשוט משתמש רשום

    הצטרף:
    ‏12/7/12
    הודעות:
    277
    תודות :
    0
    נקודות:
    17
    תודה רבה על ההשקעה!!!
     
  4. UU

    UU משתמש רשום

    הצטרף:
    ‏10/10/18
    הודעות:
    48
    תודות :
    36
    נקודות:
    19
    יש היום המון המון אפשרויות ב-CSS, חבל לצרף פה JS - זה הרבה יותר עבודה למתכנת - וגם לדפדפן...
    האופציה הכי פשוטה זה הגדרת גובה ורוחב ב-VW במקום באחוזים
    יש לשים לב שה100% עליו מתבסס vw הוא רוחב העמוד כולו ולא רוחב חלקי של אלמנט פנימי.
    אם זה לא מתאים לך - אני יכולה למצוא טריקים אחרים לכל מצב, ובד"כ בלי שימוש ב-JS (שזו תמיד אפשרות...)
    לדוגמא:
    div{
    width: 20vw;
    height: 20vw;
    }
    כלומר - רוחב וגובה 20 אחוז מרוחב העמוד - תמיד שווים - גם אם רוחב העמוד ישתנה
    הערה: יש לשים לב לתאימות דפדפנים, לא כולם תומכים ב-VW

    בהצלחה
     
    נטול עץ ו-איש פשוט אוהבים את זה.
  5. GolanArt

    GolanArt משתמש סופר מקצוען צילום מקצועי פיתוח / אפיון / עיצוב אתרים עיצוב גרפי הדמיות בתלת מימד עיצוב ואדריכלות פנים

    הצטרף:
    ‏6/7/10
    הודעות:
    6,076
    תודות :
    2,665
    נקודות:
    134
    סוג מצלמה:
    nikon
    אם אתה מתייחס לרוח המסך ולא לרוחב שאל אלמנט שבתוכו מקונן הדיב, אז הפטנט הוא להשתמש בVW גם בגובה:
    https://jsfiddle.net/u15kraog/57/
    (נסה להקטין שם את המסך)
     
    Aharono, נטול עץ, אהרן2 ומשתמש נוסף אוהבים את זה.
  6. איש פשוט

    איש פשוט משתמש רשום

    הצטרף:
    ‏12/7/12
    הודעות:
    277
    תודות :
    0
    נקודות:
    17
  7. UU

    UU משתמש רשום

    הצטרף:
    ‏10/10/18
    הודעות:
    48
    תודות :
    36
    נקודות:
    19
    זו האפשרות השניה שבאתי לכתוב.
    עדיין אם שייך הייתי הולכת על הראשונה שכתבתי (שימוש ב-VW) כדי לא להסתבך עם מבנה HTML שונה מהנדרש ואם תוכן יותר בעייתי, וגם - הימנעות עד כמה שניתן משימוש ב-position: absolute; שלפעמים יוצר בעיות.
    דרך אגב - גם בשימוש ב-VW אפשר לשים max-width ו-max-height זהים לא להסתבך עם מסכים גדולים מידי.
     
    נטול עץ, GolanArt ו-איש פשוט אוהבים את זה.
  8. GolanArt

    GolanArt משתמש סופר מקצוען צילום מקצועי פיתוח / אפיון / עיצוב אתרים עיצוב גרפי הדמיות בתלת מימד עיצוב ואדריכלות פנים

    הצטרף:
    ‏6/7/10
    הודעות:
    6,076
    תודות :
    2,665
    נקודות:
    134
    סוג מצלמה:
    nikon
  9. GolanArt

    GolanArt משתמש סופר מקצוען צילום מקצועי פיתוח / אפיון / עיצוב אתרים עיצוב גרפי הדמיות בתלת מימד עיצוב ואדריכלות פנים

    הצטרף:
    ‏6/7/10
    הודעות:
    6,076
    תודות :
    2,665
    נקודות:
    134
    סוג מצלמה:
    nikon