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

[איש פשוט]

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

 

[Naftali Stein]

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

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

https://plnkr.co/edit/oIqiH9tuGp6EqHvZD6JE?p=preview

 

[איש פשוט]

תודה רבה על ההשקעה!!!

 

[UU]

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

בהצלחה

 

[GolanArt]

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

אם אתה מתייחס לרוח המסך ולא לרוחב שאל אלמנט שבתוכו מקונן הדיב, אז הפטנט הוא להשתמש בVW גם בגובה:
https://jsfiddle.net/u15kraog/57/
(נסה להקטין שם את המסך)

 

[איש פשוט]

ראיתי גם אפשרות כזו.. נראה לי הכי פשוט
https://www.w3schools.com/howto/howto_css_aspect_ratio.asp

 

[UU]

ראיתי גם אפשרות כזו.. נראה לי הכי פשוט
https://www.w3schools.com/howto/howto_css_aspect_ratio.asp

זו האפשרות השניה שבאתי לכתוב.
עדיין אם שייך הייתי הולכת על הראשונה שכתבתי (שימוש ב-VW) כדי לא להסתבך עם מבנה HTML שונה מהנדרש ואם תוכן יותר בעייתי, וגם - הימנעות עד כמה שניתן משימוש ב-position: absolute; שלפעמים יוצר בעיות.
דרך אגב - גם בשימוש ב-VW אפשר לשים max-width ו-max-height זהים לא להסתבך עם מסכים גדולים מידי.

 

[GolanArt]

,,,

 

[GolanArt]

יש כאן עוד קוד:
https://codepen.io/Kseso/pen/bfdhg