使用Flexbox实现博客响应式卡片图文布局 解决断点图片拉伸问题

问题原因 #

Flex 容器默认开启 align-items: stretch 规则，作为 .post 容器子项的图片会被强制拉伸到和右侧内容等高，配合你全局给 img 设置的 width: 100%，直接破坏了图片原始宽高比。

修复方案 #

只需要修改两处CSS即可：

1. 给 .post 容器添加对齐规则，取消子项拉伸默认值

.post {
  padding-top: 10px;
  padding-inline-end: 20px;
  align-items: flex-start; /* 新增行 */
}

2. 给图片设置固定伸缩基准，兜底保护宽高比

.post-img {
  flex: 0 0 50%; /* 可根据设计需求调整占比，示例为占卡片宽度的50% */
  align-self: flex-start;
  object-fit: cover; /* 若需要完整显示图片不裁剪，可改为 contain */
}

补充说明 #

如果需要调整图片和文字区域的占比，直接修改 .post-img 中 flex 属性的第三个参数即可，不需要修改HTML结构。断点下容器宽度缩小的时候，图片会按你设置的占比同步缩放，始终保持原始比例。

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