基于SCSS与Flexbox的Logo组件双布局适配问题求助

核心思路 #

通过Flexbox结合width: fit-content、max-width及容器包裹的方式，让Logo组件根据内部元素（是否存在合作方Logo）自动调整宽度，同时严格限制合作方Logo仅通过高度控制显示，避免超出容器范围。

基础HTML结构 #

<!-- 居中布局的Logo组件 -->
<div class="logo-container center-align">
  <img src="our-logo.png" alt="我方Logo" class="our-logo">
  <!-- 合作方Logo：仅在存在时渲染 -->
  <div class="partner-logo-wrapper">
    <img src="partner-logo.png" alt="合作方Logo" class="partner-logo">
  </div>
</div>

<!-- 左对齐布局的整体容器 -->
<div class="left-align-layout">
  <div class="logo-container">
    <img src="our-logo.png" alt="我方Logo" class="our-logo">
    <div class="partner-logo-wrapper">
      <img src="partner-logo.png" alt="合作方Logo" class="partner-logo">
    </div>
  </div>
  <div class="right-content">
    右侧展示的其他内容
  </div>
</div>

关键CSS实现 #

/* 通用Logo容器：自适应宽度，不超出父容器 */
.logo-container {
  display: flex;
  align-items: center;
  gap: 12px; /* 我方Logo与合作方Logo的间距 */
  width: fit-content; /* 容器仅包裹内部元素宽度 */
  max-width: 100%; /* 强制限制在父容器范围内 */
}

/* 我方Logo：固定高度，禁止压缩 */
.our-logo {
  height: 40px; /* 按需设置高度 */
  flex-shrink: 0; /* 防止被Flex布局压缩 */
}

/* 合作方Logo包裹容器：仅控制高度，限制宽度 */
.partner-logo-wrapper {
  height: 32px; /* 合作方Logo的固定高度 */
  flex-shrink: 1; /* 允许在容器不足时压缩 */
  max-width: calc(100% - 52px); /* 减去我方Logo宽度（按高度比例自动计算）+ 间距，确保不溢出 */
  overflow: hidden;
}

/* 合作方Logo：仅继承高度，宽度自适应比例 */
.partner-logo {
  height: 100%;
  width: auto; /* 自动按图片比例计算宽度 */
  object-fit: contain; /* 保持Logo比例，避免拉伸变形 */
}

/* 居中布局样式 */
.logo-container.center-align {
  margin: 0 auto; /* 水平居中 */
}

/* 左对齐布局父容器 */
.left-align-layout {
  display: flex;
  align-items: center;
  gap: 16px; /* Logo组件与右侧内容的间距 */
  width: 100%;
}

/* 左对齐的Logo组件：禁止压缩，保持自适应宽度 */
.left-align-layout .logo-container {
  flex-shrink: 0;
}

/* 右侧内容：填充剩余空间 */
.right-content {
  flex-grow: 1;
}

关键细节说明 #

1. 自适应宽度控制：width: fit-content让Logo容器仅占据内部元素所需宽度，当没有合作方Logo时，容器会自动收缩到我方Logo的宽度。
2. 合作方Logo约束：通过包裹容器固定高度，配合width: auto和object-fit: contain，确保Logo按比例显示且不超出容器范围；max-width计算避免Logo容器整体溢出父容器。
3. 左对齐布局适配：父容器用Flex布局，Logo组件设置flex-shrink: 0防止被压缩，右侧内容通过flex-grow: 1填充剩余空间，整体布局不会超出容器。

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