如何让动态变化的Flex容器中图片上的文字随图片同步缩放？

要让文字看起来像图片的一部分并同步缩放，核心是使用和图片容器宽度绑定的相对单位，以下是几种实用方案：

1. 视窗宽度单位 vw #

1vw 等于当前视窗宽度的1%，由于你的图片容器最终宽度是视窗宽度的 50% × 80% = 40%，直接用vw设置文字大小，就能让文字和图片同步随屏幕缩放。

修改后的关键CSS代码：

.flex_image_text p {
  color: red;
  font-size: 4vw; /* 按需调整数值，比如4vw对应视窗宽度的4%，和图片缩放比例匹配 */
  font-weight: 700;
}

2. 容器查询单位 cqw（精准匹配容器） #

如果目标浏览器支持容器查询（Chrome 105+、Firefox 110+），可以给图片容器设置查询上下文，用cqw（容器宽度的1%）定义文字大小，完全基于图片容器的宽度缩放，比vw更精准。

修改后的CSS：

.flex_image {
  position: relative;
  width: 80%;
  container-type: inline-size; /* 开启容器查询上下文 */
}

.flex_image_text p {
  color: red;
  font-size: 10cqw; /* 图片容器宽度的10%，按需调整 */
  font-weight: 700;
}

3. 用 clamp() 限制缩放范围 #

如果担心文字在极端屏幕尺寸下过大或过小，可以结合clamp()函数，同时保留缩放特性：

.flex_image_text p {
  color: red;
  font-size: clamp(1.5rem, 4vw, 5rem); /* 最小1.5rem，首选4vw，最大5rem */
  font-weight: 700;
}

注意：原代码的小错误 #

原CSS中flex-direction: flex-column是错误写法，正确值应为column，否则flex布局不生效。

完整修正后的代码：

* {
  padding: 0;
  margin: 0;
}

.flex_container {
  display: flex;
  flex-direction: column;
  width: 50%;
}

.flex_image {
  position: relative;
  width: 80%;
}

.flex_image img {
  width: 100%;
}

.flex_image_text {
  position: absolute;
  bottom: 0;
}

.flex_image_text p {
  color: red;
  font-size: 4vw;
  font-weight: 700;
}

<div class="flex_container">
  <div class="flex_image">
    <img src="https://images.pexels.com/photos/1049298/pexels-photo-1049298.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1">
    <div class="flex_image_text">
      <p>Hello</p>
    </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者pileup