响应式布局优化：消除大屏图片空白，实现图片与右侧内容等高

问题情况 #

布局要求：左侧图片左浮动，宽度40%、最大宽度380px，小屏时图片缩小且文本环绕；右侧段落下方带三图网格，小屏时网格铺满屏幕。目前大屏下左侧图片下方出现空白，需要让图片高度与右侧段落+网格的总高度一致。

当前代码 #

Kirby模板代码

<?php
$chapter = [
  'title' => $data->title(),
  'id' => $data
];
?>
<?php snippet('chapter', ['chapter' => $chapter]) ?>

<div id="contractPlusParagraph">
  <img src="<?= image('studioSonnenstrasse/Vertrag.jpg')->url() ?>" id="contract" class="contract-image">
  
  <div class="content-wrap">
    <p>
      <?= $data->firstParagraph()->kirbytext() ?>
    <p>

    <div class="image-grid">
      <img src="<?= image('studioSonnenstrasse/emptyRoom/emptyRoom1.jpg')->url() ?>" class="imageSonnenstraße">
      <img src="<?= image('studioSonnenstrasse/emptyRoom/emptyRoom2.jpg')->url() ?>" class="imageSonnenstraße">
      <img src="<?= image('studioSonnenstrasse/emptyRoom/emptyRoom3.jpg')->url() ?>" class="imageSonnenstraße">
    </div>
  </div>

</div>



<p>
  <?= $data->secondParagraph()->kirbytext() ?>
<p>


  <?php endslot() ?>

  <?php endsnippet() ?>

当前CSS代码

.contractPlusParagraph{
  display:flex;
}

#contract {
  width: 40%;
  max-width: 380px;
  float: left;
  margin-right: 20px;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.imageSonnenstraße {
  max-width: 100%;
  height: auto;

}

解决步骤 #

1. 修正选择器错误：原CSS中.contractPlusParagraph是类选择器，但HTML里用的是id="contractPlusParagraph"，改为#contractPlusParagraph。
2. 用Flexbox实现等高布局：浮动无法让元素自动匹配容器高度，Flexbox默认会让子元素高度一致。移除图片的float属性，改为Flex布局下的宽度设置。
3. 图片适配容器高度：给左侧图片设置object-fit: cover（或contain，根据需求选择），确保图片填满容器高度同时保持比例；设置height: 100%让图片继承容器高度。
4. 小屏响应式调整：添加媒体查询，在小屏时让布局堆叠，恢复文本环绕效果。

修改后的CSS代码 #

/* 主布局用Flex实现等高 */
#contractPlusParagraph {
  display: flex;
  gap: 20px; /* 替代margin-right，更符合Flex布局逻辑 */
  align-items: stretch; /* 显式声明，确保子元素高度一致 */
}

#contract {
  width: 40%;
  max-width: 380px;
  height: 100%; /* 让图片高度匹配容器 */
  object-fit: cover; /* 裁剪图片填满容器，保持比例；需完整显示则用object-fit: contain */
}

.content-wrap {
  flex: 1; /* 让右侧容器占满剩余宽度 */
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 1em;
}

.imageSonnenstraße {
  max-width: 100%;
  height: auto;
}

/* 小屏响应式调整，堆叠布局+文本环绕 */
@media (max-width: 768px) {
  #contractPlusParagraph {
    flex-direction: column;
  }
  
  #contract {
    width: 40%;
    max-width: unset;
    margin-bottom: 1em;
    height: auto; /* 恢复自动高度，避免拉伸 */
    object-fit: initial;
    float: left;
    margin-right: 20px;
  }
  
  .image-grid {
    grid-template-columns: 1fr; /* 小屏下单列显示 */
  }
}

说明 #

• object-fit: cover：裁剪图片边缘填满容器，适合不需要完整显示图片的场景；若需完整显示图片，改用object-fit: contain，此时图片可能留空白但高度匹配容器。
• Flex布局的align-items: stretch确保左右子元素高度一致，左侧图片设置height: 100%后自动填满容器高度。
• 媒体查询中恢复浮动和宽度设置，保证小屏时的文本环绕效果。

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