HTML Img responsive overflow?
Hallo Liebe Community,
ich habe eine kurze Frage. Ich habe in meinem
HTML Code ein img eingefügt und es mittig zentriert und die breite auf 100% gesetzt. Zudem ist dieses Bild 100vh hoch. Sobald ich die Seite kleiner mache vergrößert sich das Bild, da die 100vh ja gefüllt werden müssen. Soweit so gut. Nun wenn ich auf Safari oder Chrome auf das responsive tool gehe, öffne ich zb die Ansicht eines iPhones und kann immer bei dem img ein Stückchen nach rechts scrollen. Scroll ich aber 100vh runter, richtet sich die Seite wieder mittig aus also springt wieder zurück. Ich hab’s versucht mit overflow hidden und max width 100% im html Bzw Body css aber nichts von beiden hat funktioniert. Wie behebe ich das?
vielen Dank im Voraus
lg
1 Antwort
Geh im Inspektor (bei mobiler Ansicht) die einzelnen Knoten in deinem Dokument durch (body-Element sowie Kindelemente). Eines der Elemente wird eine Breite einnehmen, welche die Fensterbreite überragt. Das kann ein Element mit fester Pixeleinheit sein oder ein Element, welches aufgrund des Aufrechnens bestimmter Abstände (margin/padding) die verfügbare Breite überschreitet. Ebenso kann eine absolute Positionierung Ursache des Verhaltens sein.
Wenn es an der Kombination padding / Rahmen + Breite des Elements liegt, kannst du mit einem anderen Boxmodell dafür sorgen, dass der Innenabstand/Rahmen in die Breite hineingerechnet wird.
CSS:
box-sizing: border-box;
Wenn du für eine Korrektur einen Style einsetzen musst, der nur für die bestimmte Bildschirmbreite (also das mobile Endgerät) gelten soll, kannst du deine CSS-Regel in einem Media Query definieren.
link: https://pastebin.com/wRg2mwHg
Passwort: rGd7xHNYVq
falls du die Bilder brauchst gerne Bescheid geben
Das Problem bei dir sind die Verschiebungen mit translateX. Bereits bei der Deskopansicht brauchst du sie meines Erachtens gar nicht. Man könnte bspw. die flex-basis der Boxen (bzw. width) auf 50% erhöhen und dem Container dann eine feste Breite geben, damit er via margin horizontal zentriert werden kann.
Beispiel:
.container-1 {
/* ... */
margin: 0 auto;
width: 960px;
}
Mobil sollen die Boxen, so wie ich es verstehe, abwechselnd am Zeilenanfang/-ende stehen. Nimm die hier auskommentiereten Properties dafür heraus (das Gleiche gilt für container-2).
.container-1 {
display: flex;
min-height: 50vh;
/*align-items: center;*/
/*justify-content: space-around;*/
flex-direction: column;
}
sowie das transform-Property bei deinen Box-Selektoren. Der Innenabstand für .container-1 div müsste evt. etwas angepasst werden, das flex-basis-Property bei den Boxen ebenso. Den Wechsel für die horizontale Ausrichtung bekommst du jedenfalls mit diesen Regeln zustande:
.container-1 > div {
display: flex;
}
.container-1 > div:nth-child(even) {
justify-content: flex-end;
}
.container-1 > div:nth-child(odd) {
justify-content: flex-start;
}
Kindelemente an einem geraden Index (die Zählung beginnt bei 1) werden nach rechts positionert, Kinder an ungeradem Index nach links.
Erstmal vielen vielen Dank für deine Hilfe. Es lag tatsächlich an den translate. Diese hab ich jedoch nur benutzt, um eine Animation zu starten (das einschieben von der Seite in die Mitte), wenn man auf einer bestimmen Höhe ist. Wie kann ich das machen, ohne dass es mir wieder alles zersetzt? So gesagt Soll alles, wenn opacity 0 ist nach links/rechts verschoben sein und sobald man auf der Höhe ist, blendet sich alles ein und schiebt sich in die Mitte
Oje, dein JavaScript habe ich außer Acht gelassen. Dann sollte meine obige Lösung ignoriert werden. Aktuell hast du den Überlauf im body-Selektor deaktiviert. Es reicht auch, dies nur in den Containern zu tun.
.container-1,
.container-2 {
overflow-x: hidden;
}
Ich wollte gestern außerdem noch etwas zu deinen img-Tag schreiben, habe es aber wieder vergessen: Nimm bei den Attributen height und width jeweils die Einheitsangaben heraus. Die Attribute erwarten nur reine numerische Werte (und nutzen dann intern automatisch Pixel). Wenn du Einheiten (px, vw, ...) verwenden möchtest, dann setze die Größen mit den CSS-Properties height und width. 220vh / vw würde ich übrigens nicht anraten, denn 100vh / 100vw entsprechen bereits der Größe eines Viewport (das ist der für den Nutzer aktuell sichtbare Bereich der Webseite).
Ich hab von oben nach unten alles abgecheckt und versucht nur leider finde ich immer noch nicht die passende Lösung wieso es das macht. Gibt es die Möglichkeit dass ich dir meine Dokumente per Email schicke und du es dir vielleicht einmal genauer anschauen musst. Ich hab überall recherchiert und bin komplett hilflos