移动端重叠盒子布局求助：图片适配与文本框定位问题

我实现了图片与半透明文本框重叠的布局，桌面端显示正常，但移动端出现图片裁剪问题：宽度缩小后高度未自适应，导致图片无法完整展示。同时需要解决两个核心问题，并清理冗余代码：

问题1：移动端图片100%宽度+高度自适应完整展示 #

给图片添加适配样式，同时调整容器的溢出设置：

.imagebox55 img {
  width: 100%;
  height: auto;
  object-fit: contain; /* 确保图片完整显示，避免拉伸或裁剪 */
}

/* 移除容器的溢出隐藏，防止截断图片 */
.fullcolumn {
  overflow: visible;
}
.imagebox55 {
  overflow: visible;
}

原理：width:100%让图片占满容器宽度，height:auto保持图片原始比例，object-fit:contain确保图片完整显示，同时去掉容器的overflow:hidden避免截断图片边缘。

问题2：文本框始终以自身高度50%与图片底部相交 #

修改文本框的定位逻辑，利用绝对定位+transform实现固定位置：

.textbox-only {
  position: absolute;
  width: 70%;
  /* 核心定位代码 */
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%); /* 水平居中，同时向上移动自身高度的50% */
  /* 保留原有样式 */
}

原理：bottom:0让文本框底部对齐图片容器底部，transform:translate(-50%,50%)既实现水平居中，又将文本框向上偏移自身高度的50%，无论文本内容多少，文本框的垂直中线都会对齐图片底部，达到“自身高度50%与图片底部相交”的效果。

冗余代码清理 #

1. CSS动画前缀冗余：现代浏览器已支持标准@keyframes，无需保留-moz-、-webkit-、-o-、-ms-前缀，仅保留标准写法即可：

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

2. 无用的position设置：.imagebox55的position:relative未被使用（内部无绝对定位元素），可直接删除。
3. 多余的flex属性：.fullcolumn的display:flex、justify-content:center、align-items:center属于冗余，因为.imagebox55已设width:100%，图片会自动占满容器，无需flex居中，仅保留position:relative作为文本框的绝对定位参考即可：

.fullcolumn {
  position: relative;
  overflow: visible;
}

修改后的完整代码 #

CSS #

.fullcolumn {
  position: relative;
  overflow: visible;
}

.imagebox55 {
  width: 100%;
  overflow: visible;
}

.imagebox55 img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.textbox-only {
  position: absolute;
  width: 70%;
  background: rgba(0, 0, 0, 0.5);
  padding: 2.5%;
  text-align: center;
  overflow-wrap: break-word; /* 替代word-wrap，更符合现代标准 */
  border-radius: 20px;
  animation: fadeIn 5s;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
}

.textbox-only h3 {
  color: #fcfcfc;
  font-weight: 600;
  letter-spacing: 0.15em;
  margin-bottom: 0.5em;
  text-transform: uppercase;
  font-size: 25px;
}

.textbox-only p {
  color: #fcfcfc;
  font-size: 18px;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

HTML #

<div class="fullcolumn">
  <div class="imagebox55">
    <img src="https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80">
  </div>
  <div class="textbox-only">
    <h3>Ariya Ariya Ariya Ariya Ariya Ariya Ariya Ariya </h3>
    <p>Ariya 222 Ariya 222 Ariya 222 Ariya 222 Ariya 222 Ariya 222 Ariya 222 Ariya 222 Ariya 222 Ariya 222 Ariya 222 Ariya 222 Ariya 222 Ariya 222 Ariya 222 Ariya 222 Ariya 222 Ariya 222 Ariya 222 Ariya 222 Ariya 222 Ariya 222 Ariya 222 Ariya 222 Ariya 222</p>
  </div>
</div>

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