固定宽高父div下h3字体随父容器自动缩放的实现方案

方案一：纯CSS容器查询方案（优先推荐） #

现代浏览器支持容器查询特性，可以实现完全脱离视口尺寸、仅绑定父容器尺寸的字号自适应效果，实现简单性能优异。

修改样式如下： #

1. 给h3的直接父容器添加容器声明：

.book_div_data {
  padding-top: 3rem;
  /* 新增：声明为内联尺寸容器，子元素可使用容器相对单位 */
  container-type: inline-size;
  container-name: bookTitleContainer;
}

2. 修改h3的字号规则：

.book_div_title {
  text-align: center;
  word-break: break-all;
  /* 新增：字号自适应规则 
  * clamp参数依次为最小字号、自适应规则、最大字号
  * min(15cqw, 10cqh) 表示同时取容器宽度15%、容器高度10%的最小值，避免宽高任意方向溢出
  * 数值可根据实际展示效果自行调整
  */
  font-size: clamp(1rem, min(15cqw, 10cqh), 3rem);
}

该方案支持Chrome 105+、Firefox 110+、Safari 16+，覆盖95%以上全球用户，优先选用。

方案二：JS兼容方案 #

如果需要兼容更低版本浏览器，可以通过JS动态计算适配字号：

JS逻辑代码： #

// 字号调整函数
function adjustTitleFontSize() {
  const titleEl = document.getElementById('bookdivtitle');
  const parentEl = titleEl.parentElement;
  const maxFontSize = 48; // 对应3rem（根字号16px场景）
  const minFontSize = 16; // 对应1rem
  let currentSize = maxFontSize;
  titleEl.style.fontSize = `${currentSize}px`;
  // 逐步缩小字号直到内容不溢出父容器
  while (currentSize > minFontSize && (titleEl.scrollHeight > parentEl.clientHeight || titleEl.scrollWidth > parentEl.clientWidth)) {
    currentSize -= 1;
    titleEl.style.fontSize = `${currentSize}px`;
  }
}

// React场景下调用示例，在title和series变化时触发重计算
useEffect(() => {
  adjustTitleFontSize();
}, [title, series]);

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