Как разместить (закрыть) изображение внутри тега span?

Question

У меня этот код ниже работает отлично, но мне пришлось использовать плагин imgcheckbox для выбора изображения при нажатии (как фотографии Google).

Пример 1 работает так, как я хочу.Но когда я использую плагин, он вставляет тег span для каждого изображения, поэтому css не работает как Пример 2

body {
  width: 500px;
  margin: 0 auto;
}

div.main {
  display: flex;
  flex-wrap: wrap;
}

img {
  flex-grow: 1;
  margin: 2px;
  object-fit: cover;
  height: 150px;
}

<div class="main">
  <img src="https://picsum.photos/200/350/?random">
  <img src="https://picsum.photos/600/400/?random">
  <img src="https://picsum.photos/350/125/?random">
  <img src="https://picsum.photos/180/310/?random">
  <img src="https://picsum.photos/250/300/?random">
  <img src="https://picsum.photos/220/300/?random">
  <img src="https://picsum.photos/225/305/?random">
  <img src="https://picsum.photos/200/300/?random">
</div>

Пример 2:

body {
  width: 500px;
  margin: 0 auto;
}

div.main {
  display: flex;
  flex-wrap: wrap;
}

img {
  flex-grow: 1;
  margin: 2px;
  object-fit: cover;
  height: 150px;
}

<div class="main">
  <span><img src="https://picsum.photos/200/350/?random"></span>
  <span><img src="https://picsum.photos/600/400/?random"></span>
  <span><img src="https://picsum.photos/350/125/?random"></span>
  <span><img src="https://picsum.photos/180/310/?random"></span>
  <span><img src="https://picsum.photos/250/300/?random"></span>
  <span><img src="https://picsum.photos/220/300/?random"></span>
  <span><img src="https://picsum.photos/225/305/?random"></span>
  <span><img src="https://picsum.photos/200/300/?random"></span>
</div>

Answer 1

Просто установите отображение диапазона flex или inline-flex с flex растут 1 тоже:

body {
  width: 500px;
  margin: 0 auto;
}

div.main {
  display: flex;
  flex-wrap: wrap;
}

span {
  display:inline-flex;
  flex-grow:1;
}

img {
  flex-grow:1;
  margin: 2px;
  object-fit: cover;
  height: 150px;
}

<div class="main">
  <span><img src="https://www.fillmurray.com/200/350/?random"></span>
  <span><img src="https://www.fillmurray.com/600/400/?random"></span>
  <span><img src="https://www.fillmurray.com/350/125/?random"></span>
  <span><img src="https://www.fillmurray.com/180/310/?random"></span>
  <span><img src="https://www.fillmurray.com/250/300/?random"></span>
  <span><img src="https://www.fillmurray.com/220/300/?random"></span>
  <span><img src="https://www.fillmurray.com/225/305/?random"></span>
  <span><img src="https://www.fillmurray.com/200/300/?random"></span>
</div>

Answer 2

@ Pete ответ лучше, но только для справки:

Вы можете "игнорировать" span, установив display: contents.
Таким образом, изображение будет действовать как прямое потомство div.
Поддержка браузеров не так хороша, согласно Могу ли я использовать .

div.main > span {
    display: contents;
}

---

Демо-версия:

body {
  width: 500px;
  margin: 0 auto;
}

div.main {
  display: flex;
  flex-wrap: wrap;
}

div.main > span {
  display: contents;
}

img {
  flex-grow: 1;
  margin: 2px;
  object-fit: cover;
  height: 150px;
}

<div class="main">
  <span><img src="https://picsum.photos/200/350/?random"></span>
  <span><img src="https://picsum.photos/600/400/?random"></span>
  <span><img src="https://picsum.photos/350/125/?random"></span>
  <span><img src="https://picsum.photos/180/310/?random"></span>
  <span><img src="https://picsum.photos/250/300/?random"></span>
  <span><img src="https://picsum.photos/220/300/?random"></span>
  <span><img src="https://picsum.photos/225/305/?random"></span>
  <span><img src="https://picsum.photos/200/300/?random"></span>
</div>

Answer 3

подходит как «обложка», действительно предназначенная для использования с изображением в качестве фонового изображения блока.

Вы можете попробовать переключить его на что-то вроде этого.

<span style='display:block; background-image:url("https://picsum.photos/200/350/?random");  background-size:cover;   '> </span>