基于CSS/HTML/Vue.js实现固定尺寸图片底部自适应字号文本叠加

刚好做过类似的需求，给你分享一个能完美满足要求的实现思路和代码示例👇

核心思路 #

• 用固定尺寸的相对定位容器包裹图片和文本，确保图片撑满容器，文本锚定在底部区域
• 通过JS动态检测文本是否溢出容器，自动调整字号：内容短的时候用最大字号，内容长了就逐步缩小，直到文本完全适配底部区域，绝不溢出
• 结合React的useRef和useEffect监听文本内容变化，实时触发字号调整

React 代码实现（直接可用） #

import { useEffect, useRef, useState } from 'react';

const ImageWithTextOverlay = ({ 
  imageUrl, 
  overlayText, 
  containerWidth = 400, 
  containerHeight = 300,
  maxFontSize = 48,
  minFontSize = 12 
}) => {
  const textRef = useRef(null);
  const [fontSize, setFontSize] = useState(maxFontSize);

  useEffect(() => {
    const adjustTextSize = () => {
      const textEl = textRef.current;
      if (!textEl) return;

      // 先重置到最大字号，再逐步缩小适配
      let currentSize = maxFontSize;
      textEl.style.fontSize = `${currentSize}px`;
      
      // 检测文本是否溢出容器宽度，溢出就缩小字号
      while (textEl.scrollWidth > textEl.clientWidth && currentSize > minFontSize) {
        currentSize -= 1;
        textEl.style.fontSize = `${currentSize}px`;
      }
      setFontSize(currentSize);
    };

    adjustTextSize();
    // 窗口 resize 时重新调整（如果容器是响应式的话）
    window.addEventListener('resize', adjustTextSize);
    return () => window.removeEventListener('resize', adjustTextSize);
  }, [overlayText, maxFontSize, minFontSize]);

  return (
    <div 
      style={{
        width: `${containerWidth}px`,
        height: `${containerHeight}px`,
        position: 'relative',
        overflow: 'hidden',
        // 可选：加边框方便调试容器边界
        border: '1px solid #e5e7eb'
      }}
    >
      <img 
        src={imageUrl} 
        alt="背景图"
        style={{
          width: '100%',
          height: '100%',
          objectFit: 'cover' // 确保图片适配容器，不拉伸变形
        }}
      />
      <div
        ref={textRef}
        style={{
          position: 'absolute',
          bottom: 0,
          left: 0,
          right: 0,
          padding: '8px 16px',
          backgroundColor: 'rgba(0, 0, 0, 0.6)', // 半透明背景提升文本可读性
          color: '#fff',
          textAlign: 'center',
          whiteSpace: 'nowrap', // 强制单行，需多行可改成 normal
          overflow: 'hidden',
          textOverflow: 'ellipsis' // 极端情况加省略号兜底
        }}
      >
        {overlayText}
      </div>
    </div>
  );
};

// 使用示例
export default function Demo() {
  return (
    <div style={{ padding: '2rem' }}>
      <h3>短文本效果（自动用最大字号）</h3>
      <ImageWithTextOverlay 
        imageUrl="https://picsum.photos/400/300" 
        overlayText="Hello World"
      />
      <br /><br />
      <h3>长文本效果（自动缩小字号适配）</h3>
      <ImageWithTextOverlay 
        imageUrl="https://picsum.photos/400/300" 
        overlayText="这是一段超级长的测试文本，用来验证字号会不会自动缩小以适配图片底部的宽度"
      />
    </div>
  );
}

关键细节解释 #

1. 容器定位逻辑：外层容器用position: relative，文本容器用position: absolute固定在底部，确保文本永远在图片上方的底部区域，不会偏移
2. 字号自适应逻辑：先把字号设为最大值，然后循环检测文本的实际宽度（scrollWidth）是否超过容器可用宽度（clientWidth），如果溢出就逐步减小字号，直到不溢出或者达到最小字号
3. 图片适配：用objectFit: cover保证图片在固定尺寸容器内正确显示，不会被拉伸变形，也不会留白
4. 可读性优化：给文本加半透明背景，避免文本和图片内容重叠导致看不清；极端情况如果字号到最小还是溢出，显示省略号兜底
5. 响应式支持：监听窗口resize事件，窗口大小变化时自动重新调整字号（如果容器是响应式的话）

多行文本扩展 #

如果需要支持多行文本，只需把文本容器的whiteSpace改成normal，然后把检测逻辑改成比较scrollHeight和clientHeight，调整字号直到文本高度不超过底部区域的高度即可，逻辑和单行类似。

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