Wyświetlanie galerii obrazów o różnych rozmiarach i proporcjach z następującymi specyfikacjami:
- Bez odstępów (marginesów) między obrazami.
- Przestrzeganie oryginalnego stosunku w jak największym stopniu.
- Obrazy otoczone linkiem.
- Rozwiązanie inne niż JS.
- Obrazy mogą zostać nieco przycięte.
- Przenośne rozwiązanie.
- Zestaw wyświetlanych zdjęć jest losowy.
- Obrazy muszą być wyświetlane od lewej do prawej (uniemożliwia użycie kolumn).
Osiągnąłem to za pomocą następującego rozwiązania Flexbox:
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>
Rozwiązanie działa, ale w zależności od wielkości okna niektóre zdjęcia są zbytnio powiększane, wolałbym więcej elementów na wiersz, nawet jeśli elementy powinny zostać bardziej zmniejszone.
Oznacza to, że zamiast:
Wolałbym większą gęstość przedmiotów, aby obrazy nigdy nie były powiększane:
Szukałem rozwiązań zwiększających globalnie liczbę elementów w rzędzie, aby obrazy nie były powiększane (a przynajmniej nie za bardzo: na przykład: maksymalnie 10%).
Dwie hackish rozwiązania znalazłem do tej pory to:
Rozwiązanie 1
Korzystanie z właściwości zoom :
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>
Ale ta właściwość działa świetnie w Chrome, a nie w Firefox.
Rozwiązanie 2
Emulacja właściwości powiększenia za pomocą szerokości / wysokości i przekształcenia: skala :
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>
To rozwiązanie działało do tej pory, ale wymaga kilku hacków i jest dalekie od elegancji, a teraz będzie miało wpływ na inne elementy strony.
Czy jest jakieś inne rozwiązanie, bardziej zorientowane na flexgrid, które pozwala na tego rodzaju kontrolę? Próbowałem użyć Flex-Grow: 0 : to rzeczywiście wyłącza rosnące przedmioty, ale wszędzie wokół są puste pola.
zoom
ponieważ naprawia wszystkie wiersze tak, aby miały dokładnie tę samą wysokość, dzięki temu: uniemożliwia algorytmowi naturalnej elastyczności „dostosowanie” do czegoś „tak optymalnie, jak to możliwe”. O ile rozumiem, nie jest jeszcze możliwe osiągnięcie tego, co chcę, w zgodny i niehacky sposób.Oto pomysł, w którym możesz rozważyć wysokość, aby kontrolować rozmiar wierszy, a główną sztuczką jest poleganie na
min-width:100%
swoich obrazach, aby wypełnić przestrzeń.Zasadniczo
a
określa wysokość, obraz będzie podążał za tą wysokością i obliczyauto
szerokość, aby zachować stosunek. Szerokość obrazu określi szerokość łącza, a następnie łącze powiększy się, aby wypełnić przestrzeń (tworząc w niej przestrzeń). Na koniec sprawisz,min-width:100%
że obraz wypełni przestrzeń utworzoną w łączu.Jeśli weźmiesz pod uwagę
vw
jednostkę wysokości, będziesz mieć statyczną siatkę, która będzie się skalować, zachowując tę samą ogólną strukturę:źródło
jeden sposób można go rozwiązać to poprzez dodanie
line-height: 0
doa
i ustawienieheight
wartości zpx
wartością.źródło