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!