如何在@media screen下让flex布局移动端图片按完整比例展示

核心问题原因 #

• 卡片容器.blog-post设置了固定高度height: 350px，在视口≤768px时将容器改为flex纵向排列后，原有固定高度不足以容纳纵向堆叠的图片+文本内容，flex容器会自动挤压子元素高度，最终导致图片容器被压缩到仅剩极小高度。
• 代码存在两处笔误：section的高度属性写为无效的10vp（正确视口高度单位为vh，且此处不该写死高度），HTML中日期部分错写为<spa>标签，应为<span>。

可直接复用的修复代码 #

CSS修改部分 #

/* 修正section的无效属性 */
section {
  font-family: "lato", sans-serif;
  font-size: 10px;
  width: 100%;
  height: auto; /* 替换原有的无效属性10vp */
  display: flex;
  align-items: flex-start;
  justify-content: space-evenly;
  background-color: #eee;
  padding: 0 15px;
  overflow-x: hidden; /* 替换原有的overflow: scroll，避免出现多余滚动条 */
}

/* 修正768px响应式规则 */
@media screen and (max-width: 768px) {
  .blog-post {
    padding: 2.5em;
    flex-direction: column;
    height: auto; /* 新增：取消固定高度，让内容自动撑开容器 */
    width: 100%; /* 新增：适配小屏宽度，避免溢出 */
  }

  .blog-post__img {
    min-width: 100%;
    max-width: 100%;
    transform: translate(0, -4em);
    height: 220px; /* 可自行调整，或用aspect-ratio: 16/9固定图片比例 */
  }

  /* 可选：避免图片上移后和文本区域间隙过大 */
  .blog-post__info {
    margin-top: -2em;
  }
}

HTML修改部分 #

将所有日期区域的<spa>August 18 2021</spa>修正为<span>August 18 2021</span>。

额外优化建议 #

• 统一单位基准：放开注释的html根字体设置html {font-size: 62.5%;}，全局统一em/rem的计算基准，避免不同模块字体大小导致的单位混乱。
• 卡片宽度适配：将.blog-post的固定宽度width: 850px改为max-width: 850px，小屏下自动适配视口宽度。
• 移除无效样式：.blog-post__img::before的阴影属性box-shadow: 0.5em 0.5em 3em 1px rgba(0, 0, 0, 0.5em);中透明度值不能用em单位，修正为0.5即可。

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