Wie können Bilder in den Zeilen eines CSS-Gittercontainers bleiben?
Der folgende Code zeigt das beabsichtigte Verhalten, wenn ich das Fenster in der Größe verändere Chrome 60, und in Firefox 55 (aber nicht in iOS Safari 10.3; das ist wahrscheinlich eine andere Frage, warum es sich in Safari schlecht benimmt).
Wichtig ist, dass das Seitenverhältnis der Bilder (2: 1)
ist 
ist erhalten. Ich hätte es entweder erwartet:
%Vor%oder:
%Vor% Mitpassen die Bilder in die Zeilen des Rasters, aber keiner von beiden. Mit:
%Vor% Ich bekomme das gewünschte Verhalten. Wie kann ich vermeiden, die Mathematik selbst zu berechnen? Mit anderen Worten, was soll ich tun, damit grid-template-rows: 1fr 1fr 1fr; (oder etwas Ähnliches) funktioniert?
Es ist bereits schwierig, die Höhe des Containerelements in CSS auf der realen Seite zu berechnen. Das Ziel ist es, es mit CSS-Grid-Layout zu lösen; kein JavaScript und keine Hintergrundbild-Hacks.
Update: Ich habe den Hintergrundbild-Hack ursprünglich aus zwei Gründen ausgeschlossen.
-
Ich dachte (aufgrund einiger Missverständnisse), dass das Hintergrundbild URL muss in der CSS-Datei sein, aber das ist nicht der Fall: Ich kann verwenden Inline-Stile und haben es im HTML.
-
Es fühlte sich hackisch an. Nachdem ich gesehen habe, wie kompliziert und unordentlich es wird mit verschachtelten Flex-Containern, die in einem Gittercontainer verschachtelt sind, nur um es auf Safari zu verwenden, habe ich einfach auf den Hintergrund-Hack zurückgegriffen, da er wesentlich sauberer ist und in allen getesteten Browsern funktioniert (Chrome, Firefox, Safari) .
Am Ende ist es nicht die akzeptierte Antwort, die mir geholfen hat, mein Problem zu lösen.
3 Antworten
Sie haben die Bilder auf height: 100% gesetzt. Aber 100% von was? 100% des Behälters? 100% des Ansichtsfensters? 100% der Reihe? Wenn ja, wie hoch ist die Zeile?
Chrome und Firefox machen eine fundierte Vermutung über Ihre Absichten. Sie haben Algorithmen implementiert, die über die Spezifikation hinausgehen, um die Benutzererfahrung zu verbessern. Sie nennen diese Änderungen "Interventionen" .
Safari macht das nicht. Safari hält sich streng an die Sprache spec, die besagt, dass eine prozentuale Höhe eines Elements eine definierte Höhe auf dem Elternelement haben muss, andernfalls wird sie ignoriert.
Diese Browserunterschiede werden hier genauer erläutert:
Dann müssen Sie berücksichtigen, dass Rasterelemente standardmäßig nicht kleiner als ihr Inhalt sein können. Wenn Ihre Zeilen auf 1fr festgelegt sind, die Bilder jedoch größer als der zugewiesene Speicherplatz sind, müssen die Zeilen erweitert werden. Sie können dieses Verhalten mit min-height: 0 / min-width: 0 oder overflow mit einem anderen Wert als visible überschreiben.
Dieses Verhalten wird hier genauer erklärt:
- Verhindern, dass Rasterelemente im CSS-Rasterlayout gestreckt werden
- Warum wird der Artikel nicht über die Inhaltsgröße hinaus verkleinert?
Wenn Sie die obige Anleitung berücksichtigen, können Sie Ihr Layout wahrscheinlich in Safari mit einer Kombination aus Grid- und Flex-Eigenschaften verwenden:
jsFiddle
Sie können grid-template-rows: 1fr 1fr 1fr verwenden und, noch wichtiger, müssen Sie die min-width und min-height Werte der Gitterelemente zurücksetzen, die standardmäßig auf auto (so viel wie der Inhalt) eingestellt sind.
Um eine vernünftigere Standard-Mindestgröße für Rasterelemente bereitzustellen, müssen Sie dies tun Spezifikation definiert, dass der Auto-Wert von min-width / min-height auch wendet eine automatische Mindestgröße in der angegebenen Achse auf Rasterelemente an deren Überlauf sichtbar ist und die mindestens eine Spur überspannt, deren min Spurgrößenfunktion ist automatisch. (Der Effekt ist analog zu dem automatische Mindestgröße für Flex-Artikel.)
Quelle: W3C
Dies ähnelt der auto flex-Element -Regel mit flexboxes . Sehen Sie sich die Demo unten an, wo ich sie auf zero zurücksetze:
Ich weiß nicht, wie gut die Bilder passen sollen, aber Sie könnten % verwenden. co_de% . Mit minmax() können Sie einen minimalen und einen maximalen Wert für die Größe der Rasterzeile festlegen. Wenn Sie minmax() für den min und auto für den maximalen Wert setzen, werden sie so klein, wie der Inhalt benötigt wird, und bis zu 33% der Höhe des Gittercontainers, aber nicht größer . Dadurch bleiben alle Gitterelemente auf einer maximalen Höhe von 99% der 60vh, die der Gittercontainer belegt.
Das ist nicht genau der automatische Weg, den Sie sich erhofft haben ... Sie sagen immer noch eine Größe, auch wenn sie relativ ist. Es vermeidet die klobig aussehende 33% , obwohl es nichts wirklich falsch ist mit der Verwendung dieser Methode, es sei denn, es gibt andere Einschränkungen in Ihrem Beitrag.
Allerdings kukkuz 'Antwort und das Zurücksetzen der calc((60vh - 12px) / 3) ist eine bessere Lösung und das ist was ich vermisste.