דילוג לתוכן
  • דף הבית
  • קטגוריות
  • פוסטים אחרונים
  • משתמשים
  • חיפוש
  • חוקי הפורום
כיווץ
תחומים

תחומים - פורום חרדי מקצועי

💡 רוצה לזכור קריאת שמע בזמן? לחץ כאן!
  1. דף הבית
  2. תכנות
  3. CSS:‏ max-width לא עובד בכל מקרה?

CSS:‏ max-width לא עובד בכל מקרה?

מתוזמן נעוץ נעול הועבר תכנות
4 פוסטים 1 כותבים 106 צפיות
  • מהישן לחדש
  • מהחדש לישן
  • הכי הרבה הצבעות
התחברו כדי לפרסם תגובה
נושא זה נמחק. רק משתמשים עם הרשאות מתאימות יוכלו לצפות בו.
  • yossizY מחובר
    yossizY מחובר
    yossiz
    כתב ב נערך לאחרונה על ידי yossiz
    #1

    שאלה עמרצית‏
    אני מסתכל בכתבה באיזה אתר ומפריע לי שהכתבה רחבה יותר מהמסך, אחרי חיפוש מצאתי שזה נגרם מכך שיש תמונה שרוחבה יותר מרוחב האלמנט האבא. (תיקנתי את זה על ידי הגדרה של max-width: 100% על ה-img, איזה עוד דרכים יש לתקן בעיות כאלו?)

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

    ב) למה הילד יכול לגרום לאבא לקבל רוחב יותר ממה שהוקצב לו,
    הבעיה נשארת בעינה למרות שבאבא מוגדר:

    width: 100%;
    max-width: 100%;
    overflow: hidden;
    // ניסיתי אפילו:
    width: 0;
    max-width: 0;
    

    לא עוזר שום דבר... 😠‎‏

    (עיין בדף עם הבעיה כדי לראות את הקוד)

    📧 יוסי@מייל.קום | 🌎 בלוג | ☕ קפה

    תגובה 1 תגובה אחרונה
    0
    • yossizY מחובר
      yossizY מחובר
      yossiz
      כתב ב נערך לאחרונה על ידי
      #2

      עדכון: בעזרת חבר יש לי תשובות חלקיות.

      א) פתרון חלקי: בדף הנ"ל אפשר להריץ את זה בקונסול למצוא את האלמנט הסורר:

      $$('*').filter(el => el.width > 1000)
      

      ב) תשובה חלקית: הגדרת overflow: hidden עובד רק על block elements. ואכן אם
      נגדיר את זה על ה-p הסבא של ה-img, וניתן לו רוחב קבוע, אז התמונה לא יגלוש מחוץ לו. (אלמנטי table לא מוגדרים כ-block)
      אני עדיין לא מבין למה width: 100% לא מונע את גלישת התמונה.

      📧 יוסי@מייל.קום | 🌎 בלוג | ☕ קפה

      yossizY תגובה 1 תגובה אחרונה
      1
      • yossizY מחובר
        yossizY מחובר
        yossiz
        השיב לyossiz ב נערך לאחרונה על ידי yossiz
        #3

        @yossiz אמר בCSS:‏ max-width לא עובד בכל מקרה?:

        אני עדיין לא מבין למה width: 100% לא מונע את גלישת התמונה.

        נראה לי שהבנתי, מכיון שזה בתוך טבלה, ובברירת מחדל העמודה של הטבלה מקבל את הרוחב של האלמנט הכי גדול שבתוכו.
        table-layout: fixed יכול להיות פתרון לזה

        📧 יוסי@מייל.קום | 🌎 בלוג | ☕ קפה

        תגובה 1 תגובה אחרונה
        0
        • yossizY מחובר
          yossizY מחובר
          yossiz
          כתב ב נערך לאחרונה על ידי yossiz
          #4

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

          📧 יוסי@מייל.קום | 🌎 בלוג | ☕ קפה

          תגובה 1 תגובה אחרונה
          0

          בא תתחבר לדף היומי!
          • התחברות

          • אין לך חשבון עדיין? הרשמה

          • התחברו או הירשמו כדי לחפש.
          • פוסט ראשון
            פוסט אחרון
          0
          • דף הבית
          • קטגוריות
          • פוסטים אחרונים
          • משתמשים
          • חיפוש
          • חוקי הפורום