html - 如何适合(覆盖)跨度标签内的图像？

Question

下面的代码运行良好，但我必须使用 imgcheckbox 插件才能在单击时选择图像(如谷歌照片)。

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

只需设置 span display flex 或 inline-flex with flex grow 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>