Mein gewünschtes Layout besteht darin, ein Bild unbekannter Größe auf der Seite zentrieren zu können (sowohl vertikal als auch horizontal). Wenn das Bild zu groß ist, um in jede Richtung zu passen, möchte ich Bildlaufleisten anzeigen, damit der Benutzer blättern kann, um das gesamte Bild zu sehen. Das Problem, auf das ich hingewiesen habe, ist, dass, wenn das Bild zu groß ist, um zu passen, der obere und der linke Teil des Bildes (abhängig davon, welcher Teil abgeschnitten ist) niemals zu scrollen sein wird.
Ich versuche, flexbox zu verwenden, um das gewünschte Layout zu erreichen, aber flexbox ist keine Voraussetzung. Hier ist ein kleines Beispiel, das das Problem reproduziert (beachte, dass ich keine Browser-Präfixe in das CSS gesetzt habe, also solltest du das in Chrome sehen [oder vielleicht auch Firefox?]):
Sie sollten in der Lage sein, den Rand vollständig um das Bild herum zu sehen, aber der linke und / oder obere Teil des Bildes wird abgeschnitten, wenn das Fenster schrumpft. Mehr und mehr des Bildes wird nicht sichtbar, wenn das Fenster weiter schrumpft.
Beachten Sie, dass es keinen Unterschied macht, ob dort ein Bild vorhanden ist. Hier ist ein Ausschnitt, der nur einfache alte divs verwendet, um das Problem zu zeigen:
Wiederum sollte das gesamte div immer durch Scrollen erreichbar sein, ist es aber nicht.
Wie erreiche ich das oben beschriebene gewünschte Layout mit nur HTML und CSS (JS Antworten nicht akzeptiert) ? Flexbox ist nicht erforderlich, um das Problem zu lösen, aber es wäre ein nice-to-have.
Danke!
Also ist das Kriterium, dass Sie immer ein zentriertes Bild vertikal und horizontal haben wollen, und es scrollbar haben, egal wie klein oder groß das Ansichtsfenster ist? Werfen Sie einen Blick auf diesen Ausschnitt und lassen Sie mich wissen, ob ich in der Nähe bin. Wenn ich total falsch liege, dann habe ich Plan B. Wenn ich Erfolg habe oder fast da bin, werde ich erklären, was ich getan habe.
ZUSAMMENFASSUNG
Definieren Sie <body> , denn wenn Sie dies nicht tun, können Sie nicht bestimmen, wie weit Ihre Bildlaufleisten gehen können.
♦ position: relative , top, bottom, right, und left bei 0 streckt die <body> , um das Ansichtsfenster abzudecken.
♦ width und height des Hauptteils sind 100vw und 100vh erzwingen ein Limit für <body>
♦ Da <body> ein Container ist, beeinflussen alle flexbox -Eigenschaften .x für die horizontale Zentrierung.
♦ Da Sie die Verwendung von Bildlaufleisten hervorgehoben haben, werden overflow: scroll Bildlaufleisten auch dann beibehalten, wenn sie nicht benötigt werden. Das ist in Situationen mit dynamischem Inhalt gut, weil es kein Springen geben würde.
Der äußere Container .x hat flexbox Eigenschaften, um den inneren Container .y zu zentrieren. Außerdem werden Sie eine sehr wenig bekannte Eigenschaft bemerken.
.y hat flex-flow: column nowrap , um das Bild zu zentrieren.
body hat min-content auf height und width angewendet, wodurch die Grenzen des Inhalts in ein enges Paket umgewandelt werden. Auf diese Weise können Sie die Ränder des Bildes ohne den üblichen Cutoff sehen.
AKTUALISIEREN
Diese Demo hat einige einfache JS, um zu demonstrieren, dass Bilder jeder Größe:
sindHinweis: Alles unter DEMO kann ganz sicher gelöscht oder auskommentiert werden.
Falls Sie noch suchen oder für andere, die an einer einfachen Lösung interessiert sind:
Sie können dies erreichen, indem Sie Ihr Bild wie folgt in ein Container in einem Flex-Container einschließen:
display: flex height: 100vh margin: auto Dies ist alles, was Sie benötigen, um ein Bild unbekannter Größe im Ansichtsfenster vertikal und horizontal zu zentrieren, ohne die Fähigkeit zu verlieren, zu einem Teil davon zu scrollen, falls es nicht in eine Richtung passt.
>Beispiel 1: (Bild im Ansichtsfenster zentriert)
Beispiel 2: (Das Bild passt nicht in das Ansichtsfenster, kann aber noch gescrollt werden)
Es funktioniert in der neuesten Version von Chrome, Firefox, Opera und Edge.