如何让CSS中字母K撑满所在div容器并实现响应式布局？

问题分析 #

要实现字母K上下边缘完全贴合所在div容器，同时保持响应式，后续在K旁添加文本时不打乱carousel布局。之前直接设置font-size: max(40vh,30vw)会超出容器，导致carousel尺寸异常，核心原因是字体大小未和容器高度绑定，且默认字体基线、行高会产生额外间距。

修正代码 #

<div class="carousel-item active">
  <div class="container-fluid" style="background-color: #D65A31; height: max(40vh, 30vw);">
    <div class="row h-100">
      <!-- 字母K所在容器 -->
      <div class="col-4 d-flex align-items-center justify-content-center" style="overflow: hidden;">
        <span style="color: #2BB673; font-size: 100%; line-height: 1; height: 100%;">K</span>
      </div>
      <!-- 右侧文本区域 -->
      <div class="col-8 d-flex flex-column justify-content-center px-4">
        <p style="font-size: clamp(1.5rem, 7vw, 3rem); color: #EEEEEE; margin: 0;">Lorem.</p>
        <p style="font-size: clamp(0.8rem, 3vw, 1.5rem); opacity: 0.75; color: #EEEEEE; margin-top: 0.5rem;">
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr
        </p>
      </div>
    </div>
  </div>
</div>

关键调整点 #

• 容器约束：给K的父容器添加overflow: hidden，防止字母超出容器破坏布局；用d-flex align-items-center justify-content-center确保字母在容器内居中且填满。
• 字体适配容器：将K的font-size设为100%，同时设置height: 100%，让字母高度完全匹配容器高度；配合line-height: 1消除字体默认的上下间距，确保边缘贴合。
• 响应式文本优化：右侧文本用clamp()替代固定vw值，兼顾小屏和大屏的可读性，避免极端尺寸下文本过大或过小。
• 简化结构：删除原代码中冗余的嵌套row，减少布局冲突点。

额外优化建议 #

• 如果字体本身有内置间距，可尝试调整font-stretch或选用更紧凑的无衬线字体（如Arial、Roboto），进一步贴合容器边缘。
• 若需支持多字母场景，可搭配text-transform: uppercase和上述布局逻辑，保持样式一致性。

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