Question

Отображение галереи изображений с изображениями разного размера и соотношения со следующими характеристиками:

Нет пробелов (полей) между изображениями.
Максимальное соблюдение исходного соотношения.
Изображения, окруженные ссылкой.
Не - 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%).

Два решения hacki sh, которые я нашел до сих пор:

Решение 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>

Это решение работало до сих пор, но требует нескольких взломов, далеко не элегантно и теперь будет влиять на другие элементы страницы.

Есть ли какое-либо другое решение, более ориентированное на гибкую сетку, которое разрешает такой контроль? Я попытался использовать flex-grow: 0 : это действительно отключает растущие элементы, но везде вокруг изображений появляются пробелы.

Aleksandr Belugin · Answer 1 · 14 февраля 2020

Я изменяю вашу попытку запуска.

Основная идея состоит в том, чтобы изменить img width: 100%; на width: auto; и указать ссылки 'height. Это даст нам изображения с пробелами.

Чтобы удалить пробелы, мы можем добавить к ссылкам display: flex; и flex-direction: column;. Почти готово.

Последний шаг - это добавление к ссылкам max-width: 100%;, это защитит от переполнения, если изображение width будет шире столбца на маленьком экране. Такую проблему мы могли бы увидеть в первом решении Темани Афифа с 4-м изображением, если мы поместим более height ссылок. Отредактировано

Просмотрите фрагмент.

section {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

section a {
  flex: auto;
  display: flex;
  flex-direction: column;
  height: 166px;
  max-width: 100%;
}

section img {
  height: 100%;
  width: auto;
  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>

Temani Afif · Answer 2 · 14 февраля 2020

Вот идея, где вы можете рассмотреть высоту, чтобы контролировать размер строк, и основной трюк - полагаться на min-width:100% для ваших изображений, чтобы заполнить пространство.

По сути, a определит высоту, изображение будет следовать этой высоте и вычислит ширину auto, чтобы сохранить соотношение. Ширина изображения будет определять ширину ссылки, а затем ссылка будет увеличиваться, чтобы заполнить пространство (создавая пространство внутри него). Наконец, min-width:100% заставит изображение заполнить пространство, созданное внутри ссылки.

section {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

section a {
  flex: auto;
  height: 100px;
}

section img {
  height: 100%;
  width: auto; /* we need auto to keep the ratio based on the height */
  min-width: 100%; /* we expand the image to fill the gaps */
  max-width:100%;
  object-fit: cover;
}

<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>
  <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>

Если вы рассмотрите vw единицу для высоты, у вас будет таблица c, которая будет масштабироваться при сохранении той же общей структуры:

section {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

section a {
  flex: auto;
  height: 8vw;
}

section img {
  height: 100%;
  width: auto;
  min-width: 100%;  
  max-width:100%;
  object-fit: cover;
}

<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>
  <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>

Matan Sanbira · Answer 3 · 01 февраля 2020

Один из способов решения этой проблемы - добавление line-height: 0 к a и установка значения height со значением px.

section {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
section a {
  flex: auto;
  line-height: 0;
}
section img {
  height: 300px;
  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>

Предпочитаю усадку по сравнению с ростом в гибком контейнере с гибким потоком: обтекание строк

Решение 1

Решение 2

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 3 ]

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Предпочитаю усадку по сравнению с ростом в гибком контейнере с гибким потоком: обтекание строк

Решение 1

Решение 2

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

Ответы [ 3 ]

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Похожие темы