javascript - איך אני ניגש לאלמנטים של HTML ב-Angular 7 (או גרסה גבוהה יותר) כאשר CSS אינו עובד?

עברתי על כל השאלות הדומות כאן ב-StackOverflow שיכולתי למצוא. אני חדש ב-Angular, אבל בדרך כלל אני יכול להרכיב משהו שיעבוד ל-UX ו-UI לצורכי הדגמה.

כרגע, יש לי שני רכיבים מבוססי HTML במקומות שונים בעמוד שלי. אחד מהרכיבים הללו הוא גרסה עם תמונה על חצי אחד של העמוד וטקסט על החצי השני. אני אנסה להדגים זאת:

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

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

הבעיה: בגלל שהעיבודים כל כך שונים (והתלוננתי אך ללא תועלת), אני צריך ליצור את העיצוב עם תמונת רקע ברוחב מלא בדיוק בגובה של שאר העיצובים. ניסיתי כמה שיטות CSS, אבל בגלל הממדים השונים, אצטרך כמה עשרות נקודות שבירה כדי להתאים את זה בערך 90% מהזמן.

אם הייתי יכול להשתמש ב-TypeScript/JavaScript דרך Angular, הייתי יכול להגיב לשינוי גודל החלון ולוודא שהרקע ברוחב מלא. כן, אני יודע: זה לא הפתרון הנקי ביותר, אבל אני חייב לסיים את זה עד סוף יום מחר.

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

שוב, חיפשתי בגוגל ובמקומות אחרים. התשובות שנראו מתאימות היו מעבר ליכולות שלי - ואני חודר לקובץ component.ts של מישהו אחר, אז אני לא רוצה להפוך אותו לגרסה שונה לחלוטין.

יש הצעות? טיפים? טריקים? קישורים לבדיקה?

תשובה #1

האם ניסית להשתמש בבוטסטראפ? https://getbootstrap.com/docs/4.5/getting-started/introduction/

אתה יכול לנסות ליצור רשת: השורה הראשונה מחולקת לשני עמודות והשורה השנייה רק לעמודה גדולה אחת.

      <!-- parent component html -->
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            <!-- here put the component child1 you want  on the left -->
          </div>
          <div class="col-md-6">
            <!-- here put the component child1 you want  on the right -->
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
              <!-- here put the component child2  -->
          </div>
        </div>
      </div>

משהו כזה