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的直接子级。
根据{{3}}，浏览器支持不是很好。

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>

如何在span标签内放置（覆盖）图像？

3 个答案: