如何优化图片上黑色文本框的响应式布局？

问题分析 #

你当前使用 absolute position + 固定像素值 translate 的定位方式，在窗口尺寸变化时会导致文本框错位——固定像素值无法自适应不同屏幕大小。下面提供两种更适合响应式设计的实现方案。

一、顶部Mission区域优化 #

调整HTML结构 #

将文本框放入图片容器内，确保二者属于同一个父级上下文：

<div class="top-image">
  <img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg" />
  <div class="text-center">
    <h2>Our Mission</h2>
    <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
  </div>
</div>

优化CSS样式 #

使用 position: relative 让父容器成为定位基准，再通过 transform: translate(-50%, -50%) 实现真正的居中：

.top-image {
  position: relative;
  max-width: 1200px;
  margin: 69px auto 0;
}

.top-image img {
  width: 100%;
  max-height: 700px;
  display: block;
}

.text-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: black;
  width: 100%;
  padding: 10px 0;
}

这种方式无论图片尺寸如何变化，文本框都会始终保持在中心位置。

二、底部Locations区域优化 #

调整HTML结构 #

将所有地址框放入背景图容器内，统一管理布局：

<div class="bottom">
  <div class="bottom-image">
    <h2>Locations</h2>
    <div class="locations-container">
      <div class="blackbox">
        <h3>Downtown</h3>
        <h4>384 West 4th St</h4>
        <h4>Suite 108</h4>
        <h4>Portland, Maine</h4>
      </div>
      <div class="blackbox">
        <h3>East Bayside</h3>
        <h4>3433 Phisherman's Avenue</h4>
        <h4>(Northwest Corner)</h4>
        <h4>Portland, Maine</h4>
      </div>
      <div class="blackbox">
        <h3>Oakdale</h3>
        <h4>515 Crescent Avenue</h4>
        <h4>Second Floor</h4>
        <h4>Portland, Maine</h4>
      </div>
    </div>
  </div>
</div>

优化CSS样式 #

用Flexbox布局替代固定定位，实现自适应排列：

.bottom {
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}

.bottom-image {
  width: 100%;
  min-height: 500px;
  background: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-locations-background.jpg") center/cover no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 50px;
}

.locations-container {
  display: flex;
  gap: 40px;
  margin-top: 15px;
  flex-wrap: wrap;
  justify-content: center;
}

.blackbox {
  background-color: black;
  width: 300px;
  padding: 20px 0;
  opacity: 1;
}

• flex-direction: column 让标题和地址框垂直排列
• flex-wrap: wrap 确保小屏幕上地址框自动换行
• 移除所有固定像素的定位，完全依赖Flexbox的自适应特性

额外响应式建议 #

• 添加媒体查询，在小屏幕上调整字体大小、地址框宽度等元素
• 确保所有图片设置 max-width: 100% 避免溢出屏幕

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