Отображение галереи изображений различных размеров и соотношения со следующими характеристиками:
- Нет пробелов (полей) между изображениями.
- Соблюдайте оригинальное соотношение в максимально возможной степени.
- Изображения окружены ссылкой.
- Решение не JS.
- Изображения могут быть обрезаны немного.
- Портативное решение.
- Набор отображаемых изображений является случайным.
- Изображения должны отображаться слева направо (предотвращает использование столбцов).
Я добился этого с помощью следующего решения 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>
Решение работает, но в зависимости от размера окна, некоторые изображения увеличиваются слишком сильно, я бы предпочел больше элементов в строке, даже если элементы должны быть уменьшены больше.
Это означает, что вместо:
Я бы предпочел более высокую плотность элементов, чтобы изображения никогда не увеличивались:
Я искал решения для глобального увеличения количества элементов в ряду, чтобы изображения не увеличивались (или, по крайней мере, не слишком сильно: например: максимум 10%).
Два хакерских решения, которые я нашел до сих пор:
Решение 1
Используя свойство 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>
Но это свойство прекрасно работает в Chrome, а не в Firefox.
Решение 2
Эмуляция свойства zoom с width / height и transform: scale :
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>
Это решение работало до сих пор, но требует нескольких хаков, и далеко не элегантно, и теперь будет влиять на другие элементы страницы.
Есть ли какое-либо другое решение, более ориентированное на flexgrid, которое разрешает такой контроль? Я попытался использовать flex-grow: 0 : он действительно отключает растущие элементы, но тогда вокруг изображений появляются пробелы.
zoom
так как фиксирует все строки на одинаковую высоту, тем самым делая невозможным: он предотвращает естественный алгоритм flex, чтобы «адаптироваться» к чему-то «как можно более оптимально». Насколько я понимаю, пока невозможно достичь того, чего я хочу, совместимым и не хакерским способом.Вот идея, где вы можете рассмотреть высоту, чтобы контролировать размер строк, и основной трюк заключается в том, чтобы положиться на
min-width:100%
ваши изображения, чтобы заполнить пространство.В основном,
a
будет определять высоту, изображение будет следовать этой высоте и вычислитauto
ширину, чтобы сохранить соотношение. Ширина изображения будет определять ширину ссылки, а затем ссылка будет увеличиваться, чтобы заполнить пространство (создавая пространство внутри него). Наконец,min-width:100%
вы заставите изображение заполнить пространство, созданное внутри ссылки.Если вы посчитаете
vw
единицу для высоты, у вас будет статическая сетка, которая будет масштабироваться, сохраняя при этом общую структуру:источник
Один из способов решить эту проблему - добавить
line-height: 0
к значению значениеa
и установить его .height
px
источник