响应式图片行上方文字实现：示例代码技术咨询

看你已经有了基础的代码框架，我来一步步帮你完善这个「图片行上方带文字」的响应式效果：

1. 先调整HTML结构，容纳图片上方的文字 #

原来的<span class="gg-slide">没法很好地承载文字+图片的组合，改成块级容器，内部新增文字元素：

<div class="gg-slides">
  <div class="gg-con">
    <div class="gg-slide">
      <div class="gg-slide-text">图片标题1</div>
      <img src="http://placehold.it/200x200" alt="示例图片1">
    </div>
    <div class="gg-slide">
      <div class="gg-slide-text">图片标题2</div>
      <img src="http://placehold.it/200x200" alt="示例图片2">
    </div>
    <!-- 可以继续添加更多图片项 -->
  </div>
</div>

2. 优化CSS，实现文字悬浮+响应式布局 #

基于你现有的CSS代码，补充和调整样式，让文字固定在图片顶部，同时适配不同屏幕：

.gg-slides {
  height: auto;
  overflow: hidden;
  padding: 0 15px; /* 小屏幕下避免图片贴边 */
}
.gg-con {
  margin: 75px 0 80px;
  display: flex;
  flex-wrap: wrap; /* 核心：小屏幕自动换行 */
  gap: 20px; /* 图片间的间距，比margin更灵活 */
  justify-content: center; /* 图片行居中对齐 */
}
.gg-slide {
  position: relative; /* 为文字的绝对定位提供参考 */
  flex: 0 0 auto; /* 保持图片原尺寸，不被拉伸 */
  max-width: 100%; /* 小屏幕下图片占满宽度 */
}
.gg-slide-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 10px;
  background-color: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 14px;
  text-align: center;
  z-index: 2; /* 确保文字在图片上方 */
}
.gg-slide img {
  display: block; /* 去掉图片默认的行内间距 */
  width: 100%; /* 图片自适应容器宽度 */
  height: auto; /* 保持图片比例，避免变形 */
}
/* 调整你原有的图标样式，优化居中效果 */
.gg-icon {
  background: rgba(0,0,0,.6);
  border-radius: 99px;
  color: #fff; /* 深色背景下把文字改成白色更显眼 */
  cursor: pointer;
  height: 126px;
  left: 50%;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%); /* 精准居中，替代margin偏移 */
  transition: all .5s ease;
  width: 126px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center; /* 让图标内部的内容居中 */
}

3. 响应式细节优化（可选） #

如果要让移动端体验更好，可以加个媒体查询调整样式：

@media (max-width: 768px) {
  .gg-slide-text {
    font-size: 16px;
    padding: 15px; /* 移动端放大文字和内边距 */
  }
  .gg-con {
    margin: 40px 0 50px; /* 移动端缩小上下间距 */
  }
}

常见问题排查 #

• 文字被图片遮挡：检查.gg-slide是否设置了position: relative，以及.gg-slide-text的z-index是否高于图片；
• 图片拉伸变形：确认图片的height: auto属性存在，不要给图片设置固定高度；
• 小屏幕图片排列错乱：确保.gg-con的flex-wrap: wrap已添加，没有给容器设置固定宽度限制。

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