Flüssigkeitsbilder in einem variablen Anteilslayout

Es ist heutzutage ziemlich einfach, Flüssigkeitsbilder in unabhängigen Layouts zu verarbeiten. Für komplexere Schnittstellen müssen wir jedoch häufig Bilder in reaktionsschnelle Elemente wie dieser Karte platzieren:

Angenommen, dieses Bild ist nicht-semantischer Inhalt und wird nur zur Dekoration verwendet. Dies ist ideal für die Verwendung background-image . Und da dieses Bild Objekte enthält, können wir bei reaktionsfähigem Layout keine Teile erregen, daher wählen wir background-size: contain .

Das Problem ist: Auf mobilen Geräten ändert sich diese Kartenorientierung und wird vertikal, wobei das Bild oben. Wir können dies mit jeder Art von CSS -Layout -Technologie tun, und es ist wahrscheinlich am besten, ein CSS -Gitter oder eine Gummibeldung zu verwenden.

Wenn wir jedoch kleinere Bildschirme testen, erhalten wir aufgrund contain Attributs die folgenden Ergebnisse:

Das ist nicht ideal. Das Bild wird geändert, um das Seitenverhältnis aufrechtzuerhalten, und wirkt keine Details. Wir können background-size nicht cover , wenn das Bild wichtig ist und nicht beschnitten werden sollte.

Zu diesem Zeitpunkt könnte unser nächster Versuch bekannt sein: Platzieren Sie das Bildinline, nicht den Hintergrund.

Auf Desktop -Geräten funktioniert dies gut:

Es ist auch gut auf mobilen Geräten:

Auf kleineren Bildschirmen wird der Anteil des Bildes jedoch aufgrund aller festen Größen verzerrt.

Wir können Stunden damit verbringen, Bilder, Karten und elastische Eigenschaften anzupassen und hin und her anzupassen. Oder wir können ...

Trennende Hauptinhalte vom Hintergrund

Dies ist die Grundlage, um mehr Flexibilität und Flexibilität in reaktionsschnellen Bildern zu erlangen. Obwohl dies in allen Fällen nicht möglich ist, kann dies in vielen Fällen mit nur ein wenig Aufwand im Design erreicht werden, insbesondere wenn ein solcher Ansatz im Voraus geplant ist.

In unserer nächsten Iteration legen wir das Erdbeerbild auf einen transparenten Hintergrund und verwenden CSS, um die blaue Farbe im Rasterbild einzustellen. Verwenden Sie weiterhin die Ansichtsfenstergröße in der Demo, indem Sie die Größe des Beispielraums ändern!

Wenn wir uns die Stile sorgfältig ansehen, beachten Sie, dass wir dem Div, das das Bild enthält, auch Polsterung hinzufügen, sodass die Erdbeeren nicht zu nahe an den Kanten kommen. Wir können vollständig steuern, wie nah oder weit wir möchten, dass sie mit dieser Polsterung zusammen sind.

Beachten Sie, dass wir auch negative Margen verwenden, um die Polsterung der externen Kartenverpackung kompensieren zu können, andernfalls gibt es Rohlinge um das Bild.

Verwenden Sie das Objekt-Fit-Attribut für Inline-Bilder

Obwohl die vorherige Demonstration funktioniert, können wir diesen Ansatz noch verbessern. Bisher nahmen wir an, dass das Bild semantischer Inhalt war-aber in diesem Layout können Bildabbildungen möglicherweise auch mehr als nur Dekoration sein.

Wenn dies der Fall ist, möchten wir unbedingt nicht, dass das Bild zugeschnitten wird, da dies tatsächlich dem Datenverlust entspricht. Um dies zu verhindern, ist es am besten, das Bild inline anstelle des Hintergrunds zu platzieren, was wir mit object-fit -Eigenschaft tun können.

Wir haben die Erdbeere aus dem Hintergrund extrahiert, was jetzt ein Inline -Element ist, aber wir behalten die Hintergrundfarbe im selben Bilddiv.

Das Kombinieren von object-fit: contain mit einer Breite 100% ermöglicht es Ihnen, das Fenster zu ändern und das Seitenverhältnis der Erdbeere beizubehalten. Der Nachteil dieses Ansatzes besteht jedoch darin, dass wir eine feste Höhe für die Desktop -Version des Bildes festlegen müssen - oder es folgt dem Anteil der festgelegten Breite (Reduzierung des Layouts ändert sich). Wenn wir diese Karten mit einer variablen Textmenge generieren müssen, wird der Text eingewickelt, was die Dinge zu restriktiv machen kann.

Bald kommen: Aspektverhältnis

Die Lösung für das oben genannte Problem kann bald über die kommende aspect-ratio -Eigenschaft implementiert werden. Auf diese Weise können Sie beispielsweise eine feste Skala des Elements festlegen:

 .el {
  Aspektverhältnis: 16/9;
}

Dies bedeutet, dass wir die feste Höhe beseitigen und durch das von uns berechnete Seitenverhältnis ersetzen können. Zum Beispiel sehen die Dimensionen im Desktop -Haltepunkt unseres letzten Beispiels so aus:

 .Bild {
  / * ... */
  Höhe: 184px;
  Breite: 318px;
}

Mithilfe von aspect-ratio können wir die Höhenerklärung löschen und berechnen, um die nächste Skala von 184 zu erhalten:

 .Bild {
  / * ... */
  Breite: 318px; /* Referenzbreite*/
  Höhe: Uneinig; /* Setzen Sie die Höhe der Höhe von Außenmedien zurück.
  Aspektverhältnis: 159 /92; /* Nahe 184px Höhe*/
}

Wenn Sie mehr erfahren möchten, können Sie die bevorstehenden Attribute in diesem Artikel untersuchen.

Schließlich gibt es mehrere Möglichkeiten, zuverlässige reaktionsschnelle Bilder in Layouts mit variabler Skala zu erreichen. Aber der Trick, diese Arbeit zu erleichtern - und besser - liegt nicht unbedingt in CSS; Es kann einfach sein, einfach Ihr Bild anzupassen, unabhängig davon, ob es den Vordergrund vom Hintergrund trennen soll (wie wir es getan haben) oder ein bestimmtes Bild auszuwählen, das auch dann funktioniert, wenn ein beträchtlicher Teil der Kante beschnitten wird.

Das obige ist der detaillierte Inhalt vonFlüssigkeitsbilder in einem variablen Anteilslayout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!