CSS图片文字居中适配：移动端缩放与位置固定问题咨询

我来帮你搞定这个图片拼贴+水印的问题，咱们一步步拆解优化：

核心问题分析 #

你当前的方案把所有字母放在一个统一的text容器里，虽然能横向适配宽度，但很难让每个字母精准对应到单张图片，也没法让文字大小自适应容器高度。咱们换个思路：让每个水印和对应的图片绑定在一起，从根源解决对齐和适配问题。

第一步：重构HTML结构，实现水印与图片一一对应 #

把每个字母放到对应的图片列容器里，这样天然就能和图片对齐，再也不用纠结排版错位：

<div class="row1">
  <div class="collage_column">
    <img src="images/collage1.jpg" class="img img-responsive">
    <span class="watermark">A</span>
  </div>
  <div class="collage_column">
    <img src="images/collage2.jpg" class="img img-responsive">
    <span class="watermark">B</span>
  </div>
  <div class="collage_column">
    <img src="images/collage3.jpg" class="img img-responsive">
    <span class="watermark">C</span>
  </div>
  <div class="collage_column">
    <img src="images/collage4.jpg" class="img img-responsive">
    <span class="watermark">D</span>
  </div>
  <div class="collage_column">
    <img src="images/collage5.jpg" class="img img-responsive">
    <span class="watermark">E</span>
  </div>
  <div class="collage_column">
    <img src="images/collage6.jpg" class="img img-responsive">
    <span class="watermark">F</span>
  </div>
  <div class="collage_column">
    <img src="images/collage7.jpg" class="img img-responsive">
    <span class="watermark">G</span>
  </div>
</div>

第二步：优化CSS，实现高度适配+移动端自动缩放 #

下面的代码解决了你的两个核心需求：文字适配容器高度、移动端自动缩放，同时保证字母位置固定：

.row1 {
  padding-bottom: 4em !important;
  margin-top: -4em !important;
  position: relative;
  display: flex;
  max-height: 200px;
  overflow: hidden; /* 防止图片超出容器 */
}

.row1 .img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，填满容器 */
  padding: 0 5px;
}

.collage_column {
  flex: 1; /* 替代固定百分比，7列自动均分宽度 */
  position: relative;
  height: 100%; /* 继承row1的高度 */
}

.watermark {
  position: absolute;
  z-index: 100;
  color: white;
  font-weight: bold;
  opacity: 0.7;
  /* 固定位置：这里是图片居中，你可以自定义top/left调整位置 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 自适应字体大小：最小20px，最大40px，中间根据视口高度自动缩放 */
  font-size: clamp(20px, 8vh, 40px);
  /* 可选：如果要让文字高度完全匹配容器高度，打开下面注释 */
  /* height: 100%;
  display: flex;
  align-items: center;
  justify-content: center; */
}

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

关键细节说明 #

1. 精准对齐：每个水印直接嵌套在对应图片的列容器中，绝对定位基于列容器，再也不会出现字母和图片错位的情况
2. 高度适配：collage_column继承row1的高度，水印通过绝对定位可以轻松固定在图片的任意位置
3. 移动端自动缩放：clamp(20px, 8vh, 40px)是CSS原生的自适应方案，保证在小屏幕上文字不会过大，大屏幕上也不会过小
4. 灵活调整位置：修改top和left的值就能改变水印位置，比如top:10%; left:10%就能把水印放到图片左上角

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