Bild auf Bildschirmbreite begrenzen
-
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 .
- Dieses Thema wurde geändert vor 5 Jahren von .
- Dieses Thema wurde geändert vor 5 Jahren von .
- Dieses Thema wurde geändert vor 5 Jahren von .
Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]
- Das Thema „Bild auf Bildschirmbreite begrenzen“ ist für neue Antworten geschlossen.