Anzeigen einer Bildergalerie mit Bildern unterschiedlicher Größe und Verhältnis mit den folgenden Spezifikationen:
- Keine Leerzeichen (Ränder) zwischen den Bildern.
- Das ursprüngliche Verhältnis so weit wie möglich respektieren.
- Bilder umgeben von einem Link.
- Nicht-JS-Lösung.
- Bilder könnten etwas beschnitten werden.
- Tragbare Lösung.
- Die angezeigten Bilder sind zufällig.
- Bilder müssen von links nach rechts angezeigt werden (verhindert die Verwendung von Spalten).
Das habe ich mit folgender Flexbox-Lösung erreicht:
section {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
section a {
flex: auto;
}
section img {
height: 100%;
width: 100%;
object-fit: cover;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Controlling flex growability</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
</style>
</head>
<body>
<section>
<a href="#"><img src="https://placekitten.com/400/195" width="400" height="195" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/256/400" width="256" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/237" width="400" height="237" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/111" width="400" height="111" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/245" width="400" height="245" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/227" width="400" height="227" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/250/400" width="250" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/269" width="400" height="269" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/255" width="400" height="255" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/288/400" width="288" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/234/400" width="234" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/194/400" width="194" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/222/400" width="222" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/227" width="400" height="227" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/192/400" width="192" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/141" width="400" height="141" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/289" width="400" height="289" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/255" width="400" height="255" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/210/400" width="210" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/187" width="400" height="187" alt="Kitty"></a>
</section>
</body>
</html>
Die Lösung funktioniert, aber je nach Größe des Fensters werden einige Bilder viel zu stark vergrößert. Ich würde mehr Elemente pro Zeile bevorzugen, auch wenn die Elemente stärker verkleinert werden müssen.
Dies bedeutet, dass anstelle von:
Ich würde eine höhere Dichte von Elementen bevorzugen, damit Bilder nie vergrößert werden:
Ich habe nach Lösungen gesucht, um die Anzahl der Elemente pro Zeile global zu erhöhen, damit die Bilder nicht vergrößert werden (oder zumindest nicht zu stark: zum Beispiel: maximal 10%).
Die zwei hackischen Lösungen, die ich bisher gefunden habe, sind:
Lösung 1
Verwenden der Zoom- Eigenschaft:
section {
display: flex;
flex-flow: row wrap;
justify-content: center;
zoom: 50%;
}
section a {
flex: auto;
}
section img {
height: 100%;
width: 100%;
object-fit: cover;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Controlling flex growability</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
</style>
</head>
<body>
<section>
<a href="#"><img src="https://placekitten.com/400/195" width="400" height="195" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/256/400" width="256" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/237" width="400" height="237" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/111" width="400" height="111" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/245" width="400" height="245" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/227" width="400" height="227" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/250/400" width="250" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/269" width="400" height="269" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/255" width="400" height="255" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/288/400" width="288" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/234/400" width="234" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/194/400" width="194" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/222/400" width="222" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/227" width="400" height="227" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/192/400" width="192" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/141" width="400" height="141" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/289" width="400" height="289" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/255" width="400" height="255" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/210/400" width="210" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/187" width="400" height="187" alt="Kitty"></a>
</section>
</body>
</html>
Diese Eigenschaft funktioniert jedoch hervorragend in Chrome, nicht in Firefox.
Lösung 2
Emuliert die Zoom - Eigenschaft mit Breite / Höhe und Transformation: Maßstab :
section {
display: flex;
flex-flow: row wrap;
justify-content: center;
width: 200% !important;
height: 200% !important;
transform-origin: 0 0;
transform: scale(0.5);
float: left;
margin-right: -100000px;
margin-bottom: -100000px;
}
section a {
flex: auto;
}
section img {
height: 100%;
width: 100%;
object-fit: cover;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Controlling flex growability</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
</style>
</head>
<body>
<section>
<a href="#"><img src="https://placekitten.com/400/195" width="400" height="195" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/256/400" width="256" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/237" width="400" height="237" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/111" width="400" height="111" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/245" width="400" height="245" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/227" width="400" height="227" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/250/400" width="250" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/269" width="400" height="269" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/255" width="400" height="255" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/288/400" width="288" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/234/400" width="234" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/194/400" width="194" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/222/400" width="222" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/227" width="400" height="227" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/192/400" width="192" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/141" width="400" height="141" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/289" width="400" height="289" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/255" width="400" height="255" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/210/400" width="210" height="400" alt="Kitty"></a>
<a href="#"><img src="https://placekitten.com/400/187" width="400" height="187" alt="Kitty"></a>
</section>
</body>
</html>
Diese Lösung hat bisher funktioniert, erfordert jedoch einige Hacks und ist alles andere als elegant und hat jetzt Auswirkungen auf die anderen Elemente der Seite.
Gibt es eine andere, flexgrid-orientierte Lösung, die diese Art der Steuerung ermöglicht? Ich habe versucht, flex-grow: 0 zu verwenden : Es deaktiviert zwar wachsende Elemente, aber dann gibt es überall Leerzeichen um Bilder.
zoom
da alle Zeilen so festgelegt werden, dass sie genau die gleiche Höhe haben. Auf diese Weise wird verhindert, dass sich der natürliche Flex-Algorithmus an etwas "so optimal wie möglich" "anpasst". Soweit ich weiß, ist es noch nicht möglich, auf kompatible und nicht hackige Weise das zu erreichen, was ich will.Hier ist eine Idee, bei der Sie die Höhe berücksichtigen können, um die Größe der Zeilen zu steuern. Der Haupttrick besteht darin, sich darauf zu verlassen
min-width:100%
Ihre Bilder zu verlassen, um den Raum auszufüllen.Grundsätzlich
a
definiert das die Höhe, das Bild folgt dieser Höhe und berechnet eineauto
Breite, um das Verhältnis beizubehalten. Die Breite des Bildes definiert die Breite des Links, und dann wird der Link größer, um den Raum auszufüllen (wodurch Platz darin entsteht). Schließlichmin-width:100%
wird das Bild den im Link erstellten Bereich ausfüllen.Wenn Sie die
vw
Einheit für die Höhe berücksichtigen , erhalten Sie ein statisches Gitter, das unter Beibehaltung derselben Gesamtstruktur skaliert:quelle
Eine Möglichkeit, dies zu lösen, besteht
line-height: 0
darina
, denheight
Wert zu addieren und den Wert mitpx
value festzulegen.quelle