Header元素高度与设计不符，需按设计及图片尺寸调整求助

问题分析 #

通过Perfect Pixel插件检测发现：

• Header元素高度与设计稿不一致，当前高度比设计覆盖图大80px
• 背景图实际尺寸为1440x819px
• 目标是将Header调整为1440x1207px并添加memory板块

解决方案 #

1. 调整Header高度匹配设计要求 #

修改CSS中header的height属性，从原819px改为目标的1207px，直接对齐设计尺寸。

2. 添加memory板块到Header内部 #

在Header的现有内容之后插入memory板块的HTML结构，并补充基础样式（可根据设计稿细化）。

修改后完整代码 #

CSS代码 #

header {
  background: url('https://i.imgur.com/d6N8fbO.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left top;
  min-width: 1440px;
  height: 1207px; /* 改为目标高度 */
}

/* memory板块基础样式，可按需调整 */
.memory-section {
  margin-top: 40px;
  padding: 0 20px;
}

.memory-section h3 {
  font-size: 24px;
  margin-bottom: 16px;
  color: #333;
}

.memory-section .memory-cards {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.memory-section .memory-card {
  flex: 0 1 300px;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.memory-card h4 {
  margin-top: 0;
  color: #2c3e50;
}

.memory-card p {
  color: #666;
  line-height: 1.5;
}

HTML代码 #

<header>
  <div class="container">
    <div class="row row-1">
      <div class="col col-lg-11">
        <nav class="menu">
          <ul>
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Guides</a></li>
            <li><a href="#">Flights</a></li>
            <li><a href="#">About</a></li>
          </ul>
        </nav>
      </div>
      <div class="col col-lg-7">
        <div class="contact-us right">
          <a href="#">Contact Us</a>
        </div>
      </div>
    </div>
    <div class="row row-2">
      <div class="col col-lg-7">
        <div class="left-side">
          <h2 class="title">Travel to your dream destination</h2>
          <p class="p-1">Lorem ipsum dolor sit amet, consectetur adipi scing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum sus pendisse ultrices gravida. </p>
          <a href="#">Reserve Ticket</a>
        </div>
      </div>
      <div class="col col-lg-11">
        <div class="right-side img-container">
          <img src="https://i.imgur.com/xUIyDXA.jpg" alt="Reserve Tickets" class="img-responsive" width="662" height="419">
        </div>
      </div>
    </div>
  </div>

  <!-- 新增memory板块 -->
  <div class="memory-section">
    <h3>Travel Memories</h3>
    <div class="memory-cards">
      <div class="memory-card">
        <h4>Beach Getaway</h4>
        <p>Relaxing days by the ocean with golden sands and crystal-clear waters.</p>
      </div>
      <div class="memory-card">
        <h4>Mountain Adventure</h4>
        <p>Hiking through lush trails and enjoying breathtaking panoramic views.</p>
      </div>
      <div class="memory-card">
        <h4>City Exploration</h4>
        <p>Discovering hidden gems and vibrant culture in bustling urban centers.</p>
      </div>
    </div>
  </div>
</header>

补充说明 #

• 修改height后，Perfect Pixel检测的高度偏差问题会直接解决，Header尺寸完全匹配1440x1207px的设计要求。
• 如果背景图在扩展高度后显示不符合预期，可将background-size改为contain或指定1440px 1207px，但cover更适合保持背景图铺满容器的视觉效果。
• memory板块的样式可根据设计稿的具体视觉规范调整颜色、字体、间距等细节。

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