如何通过CSS/SCSS实现图片与Section容器等高（如附图所示，适配平板端）

要让图片和所在<section>容器等高，CSS Grid是比Flexbox更合适的选择——毕竟Grid专门针对二维布局设计，能轻松处理这种行列对齐的需求。先帮你梳理下现有代码的问题，再给出调整后的方案：

现有Flex布局的问题 #

你当前的Flex代码只设置了子元素的宽度，没有处理高度逻辑：Flex容器的高度默认由内容撑开，图片只会保持自身的宽高比，自然没法和容器等高。而且奇偶项的flex-direction切换也会让布局逻辑更复杂，不利于适配。

改用Grid布局的实现方案 #

下面是调整后的SCSS代码，用Grid来分配区域，让图片自动撑满容器高度，同时保留你需要的左右排版切换和平板适配：

.main-content {
  display: grid;
  /* 默认移动端：标题+图片在上，文章在下 */
  grid-template-areas:
    "title"
    "image"
    "article";
  gap: 1rem; /* 可选：给元素之间加间距 */
}

/* 平板及以上屏幕 */
@media (min-width: 700px) {
  .main-content {
    grid-template-columns: 60% 30%;
    grid-template-areas:
      "title image"
      "article image";
    align-items: stretch; /* 强制所有网格项高度撑满容器 */
  }

  /* 偶数项切换排版 */
  .main-content:nth-child(2n) {
    grid-template-columns: 30% 60%;
    grid-template-areas:
      "image title"
      "image article";
  }
}

/* 给子元素分配网格区域 */
.main-content h4 {
  grid-area: title;
}
.main-content .chmurka {
  grid-area: image;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，裁剪多余部分；用contain则是完整显示但可能留空白 */
}
.main-content article {
  grid-area: article;
}

代码说明 #

• Grid区域分配：用grid-template-areas把标题、图片、文章分别放到指定位置，逻辑清晰，容易调整。
• 等高控制：align-items: stretch会让所有网格项自动撑满容器的高度，图片设置height: 100%后就能和section等高。
• 图片适配：object-fit: cover确保图片在填满容器的同时不会变形，你可以根据需求换成contain或者fill。
• 奇偶项切换：通过修改grid-template-columns和grid-template-areas，轻松实现左右排版的反转，比Flex的flex-direction切换更直观。

你的HTML代码不需要改动，保持原来的结构即可。

内容的提问来源于stack exchange，提问作者Błażej Kuśmirek