Support » Allgemeine Fragen » Bild auf Bildschirmbreite begrenzen

  • radarin

    (@radarin)


    Hallo.

    Ich hab da ein CSS Problem auf dem Mobile. Mein Glossar soll bei einem Click auf den Begriff die Beschreibung in einer Lightbox anzeigen. Eine Lösung die das einfach nur mit Text macht habe ich nirgens gefunden, da ist immer ein Bild mit im Spiel.

    Der verwendete Code ist also auf ein Bild angewiesen und stellt den Text in der Breite dar, in welcher auch das verlinkte Bild vorliegt. Da ich das Bild ja nicht brauche, habe ich ein transparentes Gif von 1px Höhe und 500px Breite im Einsatz. Zusätzlich blende ich diesen CSS Bereich aus. Das funktioniert auf dem Desktop einwandfrei.

    Auf dem Mobile läuft das Ganze allerdings nach rechts aus dem Bildschirm raus.

    Der Begriff im Quellcode:

    <a href="https://computer-for-dummies.ch/wp-content/plugins/rad-glossar/lightbox/images/blank.jpg" class="glossar-lightbox" rel="lightbox" title="<b>Begriffserklärung+</b><br /><br /><b>Glossar</b><br /><br />Ein Glossar ist eine Liste von Wörtern mit beigefügten Erklärungen oder Übersetzungen...">Glossar</a>

    Die Klasse glossar-lightbox habe ich hinzugefügt, weil ich damit direkt Einfluss auf das Bild nehmen will, nachdem alles Andere nicht funktioniert. (jetzt, nachdem ich nochmals kontrollgelesen habe fällt mir auf, das bezieht sich natürlich auf den Link, nicht das Bild, kann also auch nicht funktionieren)

    Das href ist das unverzichtbare Bild, im title steht der Text, welcher dann in der Lightbox angezeigt wird.

    Das aktuelle CSS:

    .glossar-lightbox {max-width: 100%; height: auto;}
    #lightbox{	position: absolute;	left: 0; width: 100%; z-index: 10000; text-align: center; line-height: 0;}
    #lightbox img{ width: auto; height: auto;}
    /*
    #lightbox img{ width: auto; height: auto;}
     */
    #lightbox a img{ border: none; }
    /* Titelbalken (Bild) */
    #outerImageContainer{ position: relative; background-color: red;  margin: 0 auto; max-width: 100%; height: auto;  visibility:hidd en;}
    /*
    #outerImageContainer{ position: relative; background-color: red; width: 250px; height: 250px; margin: 0 auto;  visibility:hidden;}
    */
    #imageContainer{ padding: 10px; } /* 10px */
    
    #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
    #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10000; }
    #imageContainer>#hoverNav{ left: 0;}
    #hoverNav a{ outline: none;}
    
    #prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
    #prevLink { left: 0; float: left;}
    #nextLink { right: 0; float: right;}
    #prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
    #nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
    
    #imageDataContainer{ font: 13px Verdana, Helvetica, sans-serif; background-color: #fff; margin-left: auto; margin-right: auto; margin-top: 100px; line-height: 1.4em; overflow: auto; width: 100%	;  border: black 1px solid;}
    
    #imageData{	padding:10px 10px 10px 10px; color: #666; }
    /* Textbereich */
    #imageData #imageDetails{ width: 99%; float: left; text-align: left; } /* 70% */	
    #imageData #caption{ font-weight: normal;	}
    #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}
    /* Bereich Clode Button */			
    #imageData #bottomNavClose{ width: -1px; float: right;  padding-bottom: 0px; outline: none; background-color: yellow; visibility:hidden;}	/* 86px */	
    /* Seite abdunkeln */
    #overlay{ position: absolute; top: 0; left: 0; z-index: 10000; width: 100%; height: 500px; background-color: green; }
    

    Aktuell wird ein grosses Bild angezeigt. Das hilft mir zu verstehen was passiert und ob die Eingriffe ins CSS den gewünschten Effekt bringen. Das Bild wird letztendlich wieder durch die transparente Grafik ersetzt.

    Mit glossar-lightbox habe ich versucht, das Bild auf den Bildschirm zu begrenzen. Auch !important hilft da nichts. Das Bild wird in der originalen Breite, in diesem Fall jetzt 800px dargestellt.

    Gruss René

    Nachtrag:

    Ich hab im CSS die Klasse #lightboxImage {max-width: 95%; height: auto;} hinzugefügt, welche mir der Quellcode liefert. Damit passt es jetzt mit dem Bild. Der Textbereich wird davon aber nicht beeinflusst. Der ist möglicherweise von #outerImageContainer abhängig, aber der reagiert nicht auf #outerImageContainer {max-width: 95%; height: auto;}

    • Dieses Thema wurde geändert vor 5 Jahren von radarin.
    • Dieses Thema wurde geändert vor 5 Jahren von radarin.
    • Dieses Thema wurde geändert vor 5 Jahren von radarin.
    • Dieses Thema wurde geändert vor 5 Jahren von radarin.

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 4 Antworten - 1 bis 4 (von insgesamt 4)
  • Moderator Hans-Gerd Gerhards

    (@hage)

    Hallo,
    hast Du denn schon mal getestet, wenn Du entsprechende Regeln speziell für mobile Geräte einbaust ?
    z. B. so (Werte für max-width müsste man natürlich noch mal testen):

    /*Auf großen Displays*/
    @media (min-width: 1700px) {
      .glossar-lightbox {max-width: 100%; height: auto;}
    }
    
    /*Auf mittelgroßen Displays*/
    @media (min-width: 1400px) and (max-width: 1700px) {
      .glossar-lightbox {max-width: 50%; height: auto;}
    }
    
    /*Auf kleinen Displays*/
    @media (max-width: 1400px)  {
      .glossar-lightbox {max-width: 30%; height: auto;}
    }
    

    Hier noch ein Link zum Testen

    Viele Grüße
    Hans-Gerd

    Thread-Starter radarin

    (@radarin)

    So habe ich es noch nicht versucht. Scheint mir aber auch nicht nötig. glossar-lightbox kann sowieso nicht funktionieren, das formatiert höchstens den Link im Text. Mit #lightboxImage könnte es Sinn machen.

    So schaut es in Firefox aus, wenn ich mir Klassen und IS anzeigen lasse.

    #lightboxImage {max-width: 95%; height: auto;} Funktioniert auf dem Handy einwandfrei. Das weisse Feld darunter mit dem Text drin, schaffe ich nicht anzusprechen. Das ist das was letzendlich noch zu sehen sein wird. Das Bild oben wird wieder auf ‚unsichtbar‘ gesetzt.

    • Diese Antwort wurde geändert vor 5 Jahren von radarin.
    • Diese Antwort wurde geändert vor 5 Jahren von radarin.
    Thread-Starter radarin

    (@radarin)

    Der Quelltext der Lightbox:

    </div>
    <div id="lightbox" style="top: 134.3px; left: 0px;">
    <div id="outerImageContainer" style="width: 820px; height: 553px; font-size: 130.596px;">
    <div id="imageContainer">
    <img id="lightboxImage" style="" src="https://computer-for-dummies.ch/wp-content/plugins/rad-glossar/lightbox/images/blank.jpg" scale="0" width="800" height="533">
    <div id="hoverNav" style="">
    <a id="prevLink" href="#" style="display: none; height: 533px;"></a>
    <a id="nextLink" href="#" style="display: none; height: 533px;"></a>
    </div>
    <div id="loading" style="display: none;"><a id="loadingLink" href="#"><img src="images/loading.gif"></a>
    </div>
    </div>
    </div>
    <div id="imageDataContainer" style="width: 820px;">
    <div id="imageData" style="">
    <div id="imageDetails">
    <span id="caption">
    <b>Begriffserklärung+</b>
    <br><br>
    <b>Glossar</b>
    <br><br>
    Ein Glossar ist eine Liste von Wörtern mit beigefügten Erklärungen oder Übersetzungen. Ist es eigenständig spricht 
    man auch von Wörterbuch, als Anhang eines Werkes von Wörterverzeichnis. Das lateinische Wort glossarium bezeichnet 
    dabei als Objekt ein „Buch“, das alte oder fremde Wörter erläutert.<br><br>kein weiter lesen an dieser Stelle möglich
    </span>
    Moderator Hans-Gerd Gerhards

    (@hage)

    Hallo @radarin,
    das war ja auch nur mit Bezug auf Deine Anfrage als Beispiel gedacht. Aber mit dem Ansatz kannst Du auf jeden Fall bei mobilen Geräten das gewünschte Ergebnis erzielen. Du musst halt nur sehen, bei welcher ID oder Klasse Du das sinnvollerweise einsetzt.

Ansicht von 4 Antworten - 1 bis 4 (von insgesamt 4)
  • Das Thema „Bild auf Bildschirmbreite begrenzen“ ist für neue Antworten geschlossen.