根据图像大小响应文本

^{在css-tip.com上了解更多 CSS 技巧}

我们经常会遇到这样的需求：需要在图片下方（或上方）添加标题，且标题不能超过图片的宽度。大多数情况下，我们需要它们具有相同的宽度。

常见的解决办法有：

• 使标题的宽度与图像相同：这不是一个动态解决方案，因为我们每次使用不同的图像时都必须手动调整宽度❌
• 在标题内手动插入换行符：不！这是一个非常糟糕的主意❌
• 使标题position:absolute能够使用，width:100%它将引用具有图像大小的容器……太复杂了，它将使我们的文本不流畅❌

这里有一个简单的解决方案来解决这个问题。无需硬编码宽度，不会超出内容流，只需几行 CSS：

<div class="box">
   <img>
   <h1>Lorem ipsum dolor ..</h1>
</div>

.box {
  display: inline-block;
}
h1 {
  width: 0;
  min-width: 100%;
}

是的，就是这样！

这个技巧依赖于两件事：

1. 我们将容器（box元素）设置为收缩适配元素（其宽度由其内容定义）。我用过inline-block，但它可以是浮动元素、table单元素、弹性元素等等。
2. 我们让标题的宽度等于容器width宽度0，这样它就不会对容器宽度产生影响。容器的宽度将仅由图片定义。我们添加min-width: 100%resize 函数，使其宽度等于容器宽度（也就是之前用图片定义的宽度！）。没错，这有点疯狂，或者说有点神奇 😉

一些工作示例

在所有上述示例中，图像将决定标题的宽度。

这个技巧不仅限于图片+标题。它可以适用于任何我们希望元素 A 定义元素 B 宽度的配置。

标题定义图像的宽度

标题定义段落的宽度

我想大家都明白了。这个技巧没有任何限制，任何类型的元素（即使是内容复杂的元素）都可以考虑使用。

我们可以将同样的逻辑扩展到列配置，让一列定义另一列的高度。这次我们将依赖height:0; min-height:100%。

这个有点棘手，因为使用或百分比高度并不简单（我们都知道预言说：“父母需要明确定义高度”）

为了解决这个问题，我将考虑一种不需要任何明确高度的 CSS 网格配置。

下面，左边的列定义了右边列的大小。当右边列的内容超出定义的高度时，右边列会出现滚动条。

从规范中我们可以读到：

一旦确定了每个网格区域的大小，网格项就会被布局到各自的包含块中。为此，网格区域的宽度和高度被认为是确定的。

网格项可以height:100%在其网格区域内安全地使用，并且该网格区域的高度将根据内容定义，并且由于其中一个具有height:0，因此它不会对该高度做出贡献（是的，与上面相同的魔法😉）

Flexbox 也可以在这里使用，但我们需要一个额外的包装器来包装将要使用的元素height:0;height:100%

我们需要额外的包装器，因为我们将依靠弹性项目的拉伸对齐来获得我们定义的尺寸，该尺寸将用作百分比的参考。

从规范来看：

如果弹性项目具有 align-self: stretch，则重新布局其内容，将此使用的尺寸视为其确定的交叉尺寸，以便可以解析百分比大小的子项。

一个元素将定义父级的高度，另一个元素将默认拉伸到该高度，并且其中的内容将调整为相同的高度。

现在，您有了一个魔术技巧，可以避免不必要的溢出，并保持元素大小相同，即使它们具有不同的内容。

我在一些 StackOverflow 帖子中使用了这个技巧：

如何将文本宽度与动态大小的图像/标题的宽度相匹配？

如何设置外部 div 的高度使其始终等于特定的内部 div？

或者