CSS:将容器元素封装在图像周围，而不是文本，即使图像较小？

Question

我希望红色容器元素是图像的宽度，而不是文本，但它跨越文本的大小，因为它更宽。如何做到这一点？

https://jsfiddle.net/strz3stt/

注意:我试图使用现有的标记，所以我需要一种方法来处理CSS，因为我不能编辑标记。

HTML：

<span class="wrapper">
  <img src="https://placekitten.com/g/400/300">
  <a href="http://google.com">Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google </a>
</span>

CSS：

.wrapper {
  border: 3px solid red;
  display: inline-block;
}
.wrapper img {
  border: 1px solid blue;
}
.wrapper a {
  display: block;
  border: 1px solid green;
}

Answer 1

假设您打算将链接的文本包装到图像的宽度，那么您可以做的就是将包装器转换成一个表。然后，通过设置width: 1px，可以将宽度强制为其内容的宽度。

(这还可以很好地处理文本中的单词恰好比图像更宽的情况。)

​

.wrapper {
  border: 3px solid red;
  display: table; width: 1px;
}
.wrapper img {
  border: 1px solid blue;
  max-width: calc(100vw - 22px);
}
.wrapper a {
  display: block;
  border: 1px solid green;
}

<span class="wrapper">
  <img src="https://placekitten.com/g/400/300">
  <a href="http://google.com">Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google </a>
</span>

​

另外，您应该考虑使用<figure>而不是<span>作为包装器。这正是<figure>的作用所在。