如何在固定定位的header标签内的div中适配img元素尺寸？

问题分析 #

你的代码存在几个核心问题导致图片无法适配：

• 固定定位的.main-header未设置明确的宽度、内边距，且继承了.place_holder的margin，导致容器尺寸混乱
• 图片的适配规则不完整，缺少保证比例的关键属性
• 固定Header会遮挡下方内容，未做偏移处理

修改后的完整代码 #

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CloneCoding</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="main">
    <!-- 占位符避免内容被Header遮挡 -->
    <div class="main-header-placeholder"></div>
    <header class="main-header">
      <div class="main-header-logo">
        <img src="assets/images/logo.png" alt="brand logo" class="main-header-logo-image">
      </div>
      <div class="main-header-brand">brand</div>
    </header>
    <section class="main-container">
      <div class="main-container-card">content</div>
      <div class="main-container-card">content</div>
      <div class="main-container-card">content</div>
    </section>
  </main>
</body>
</html>

style.css

* {
  /* 全局重置盒模型，消除默认样式干扰 */
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  border: 1px solid black;
}

.main {
  padding: 1rem;
  border: 1px solid salmon;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.main-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* 明确Header高度和内边距，预留内容空间 */
  height: 3rem;
  padding: 0 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* 添加背景色防止下方内容穿透 */
  background-color: white;
}

/* 占位符高度与Header一致，避免内容被遮挡 */
.main-header-placeholder {
  height: 3rem;
}

.main-container {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.main-header-logo {
  /* 设置Logo容器的固定尺寸 */
  width: 2.5rem;
  height: 2.5rem;
}

.main-header-logo-image {
  /* 图片填充容器并保持比例 */
  width: 100%;
  height: 100%;
  object-fit: contain;
}

关键修改说明 #

• 全局盒模型重置：用*选择器统一设置box-sizing、margin、padding，避免浏览器默认样式打乱布局
• 固定Header优化：移除place_holder类的margin影响，直接给.main-header设置明确的height和padding，保证容器尺寸稳定
• 图片适配：给Logo容器设置固定尺寸，图片用width:100%+height:100%填充容器，object-fit: contain确保图片比例不变且完全显示在容器内
• 内容偏移处理：添加.main-header-placeholder，高度与Header一致，解决固定定位遮挡下方内容的问题

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