如何让background-image自适应容器尺寸且不影响文本布局

两个问题分别来自CSS配置的疏漏：

1. 背景图挤占文本空间：你给图片div设置了height: 100%，但grid布局的卡片容器没有定义明确的行轨道分配规则，导致图片元素抢占了所有可用高度，文本被挤到容器外部溢出；同时background-size: cover的默认逻辑是裁剪图片填满整个元素区域，不会自动留白适配。
2. 文本排版溢出：卡片内的文本标签没有配置自动换行、宽度约束规则，遇到长内容时会直接撑破容器。

1. 调整卡片容器的Grid配置 #

给卡片容器补充行轨道定义，明确划分图片和文本的占用空间：

.card {
  /* 保留你原有的grid相关配置，补充以下属性 */
  grid-template-rows: 180px auto auto auto; /* 第一行给图片固定高度（数值可按需求调整），剩下三行自动适配文本高度 */
  gap: 8px; /* 给图片、不同文本块之间加间距，避免内容挤在一起 */
  width: 100%;
  max-width: 320px; /* 按设计需求设置卡片最大宽度，避免拉伸变形 */
  overflow: hidden;
  border-radius: 4px;
}

2. 修正背景图元素样式 #

移除会导致高度溢出的height: 100%配置，调整背景图适配规则：

.image {
  border-radius: 4px 4px 0 0; /* 图片在卡片顶部时，仅保留上半部分圆角和卡片弧度匹配 */
  width: 100%;
  aspect-ratio: 16/9; /* 可选，固定图片宽高比，避免不同尺寸图片导致布局跳动 */
  display: block;
  /* 想要图片填满区域不变形保留cover，想要图片完整显示不裁剪就换成contain */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #f0f0f0; /* 兜底背景色，应对图片加载失败、contain模式下的空白区域 */
}

3. 补充文本防溢出配置 #

给卡片内所有文本标签加换行、宽度约束，彻底解决排版溢出：

.card p {
  margin: 0;
  padding: 0 12px;
  width: 100%;
  overflow-wrap: break-word; /* 长单词、连续无空格内容自动换行，不会撑破容器 */
  box-sizing: border-box;
}
/* 给最后一段文本加底部内边距，避免内容贴卡片边缘 */
.card p:last-child {
  padding-bottom: 12px;
}

如果你需要实现「图片作为整个卡片背景、文本叠加在图片上」的效果，不要把图片div和文本作为同级grid子项，调整如下：

• 给.card加position: relative，移除之前的grid-template-rows配置
• 给.image加position: absolute; inset: 0; height: 100%; z-index: 0，让图片铺满整个卡片
• 给所有p标签加position: relative; z-index: 1，同时按需加文字阴影、半透明遮罩保证文本可读性。

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