Rails应用中如何实现文本覆盖图片且图片随文本高度自适应

嘿，我明白你的需求了——要让文本框在输入内容时向下扩展，同时图片能跟着文本框的高度一起延伸，而且文本框始终待在图片区域里对吧？咱们来调整一下CSS就能搞定：

首先，核心问题是原来的布局里，文本框大概率用了绝对定位脱离了文档流，导致容器没法感知到文本框的高度变化。咱们换个思路，把图片变成容器的背景层，让文本框留在文档流里驱动容器高度：

调整后的CSS代码 #

/* 外层容器：负责包裹图片和文本，高度由文本框决定 */
.image-container {
  position: relative;
  width: 100%;
  margin: 0 auto;
  /* 可选：如果想限制最大宽度，加个max-width */
  max-width: 800px;
}

/* 图片：绝对定位铺满容器，容器高度变化时自动适配 */
.something-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 保持图片比例，同时铺满容器，避免拉伸变形 */
  object-fit: cover;
}

/* 文本框：留在文档流里，驱动容器高度，同时在图片上方 */
.something-text {
  position: relative;
  z-index: 1; /* 确保文本框在图片上层 */
  width: 100%;
  padding: 1rem;
  box-sizing: border-box;
  /* 让文本框可以自动换行扩展高度 */
  resize: vertical;
  min-height: 4rem;
}

对应的Rails视图结构示例 #

<div class="image-container">
  <%= image_tag 'your-target-image.jpg', class: 'something-img' %>
  <%= text_area_tag 'user-content', '', class: 'something-text', placeholder: '输入内容...' %>
</div>

为什么这么改？ #

• 外层的.image-container用position: relative作为锚点，让内部绝对定位的图片能以它为基准布局。
• .something-img设置为绝对定位后，会完全铺满容器，而且容器的高度由.something-text的高度决定——当用户输入内容让文本框变高时，容器高度跟着增加，图片也会自动拉伸（object-fit: cover还能保证图片比例不变，不会变形）。
• .something-text用position: relative和z-index: 1，确保它在图片的上层，同时因为它在文档流里，它的高度变化会直接带动容器高度变化，完美实现你要的“图片作为文本框弹性容器”的效果。

如果你的文本框是input而不是textarea，记得把min-height调整合适，或者用height: auto让它自适应内容~

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