如何在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>

- Rodrigo Zem

Answer 1

只需将 span 的显示设置为 flex 或 inline-flex，并将 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>

- Pete

Answer 2

@Pete的回答更好，但只是供参考：

您可以通过设置display: contents来“忽略”span。这样，图像将作为

的直接子级。根据Can I Use的说法，浏览器支持并不那么好。

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>

- NullDev

---

在使用此功能时要小心，它会从可访问性树中删除那些跨度内的所有内容，这意味着像屏幕阅读器这样的设备将无法看到它。 - Pete

@Pete 谢谢你提醒我！我之前不知道那件事。 - NullDev

Answer 3

fit作为“封面”实际上是用于将图像作为块的背景图像。

您可以尝试将其切换为类似于此的内容。

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

- user1014899