调整flex-direction为column后，如何让图片在小视口全屏显示？

给你几个实用的调整步骤，都是初学者能快速上手的：

• 给图片设置宽高规则：直接给<img>标签添加 width: 100%; 和 height: auto;。图片属于替换元素，默认不会自动拉伸填充容器，必须显式指定宽度，height: auto能保证图片比例不失调。
• 检查Flex容器的父元素：如果你的flex容器嵌套在其他元素里，要确保父元素在小视口下也是 width: 100%;，没有设置固定宽度或者超出视口的约束，不然容器本身就没法占满视口，图片自然也不行。
• 确认Flex容器的align-items属性：当flex-direction: column时，align-items控制子元素的横向对齐方式，默认是stretch（拉伸占满），但如果之前代码里手动设置了flex-start或center这类值，就会覆盖默认行为。可以显式写上align-items: stretch;，确保子元素能横向拉伸。
• 检查图片的max-width：如果图片之前设置了max-width小于100%，也会限制它的宽度，要把max-width: 100%;加上，保证图片不会超出容器范围。

给你个完整的示例代码参考：

/* 小视口适配规则 */
@media (max-width: 768px) {
  .flex-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: stretch; /* 显式声明，避免默认值被覆盖 */
    box-sizing: border-box; /* 让width包含padding和border，避免宽度计算偏差 */
  }

  .flex-container img {
    width: 100%;
    height: auto;
    max-width: 100%;
  }
}

另外，如果容器有padding，box-sizing: border-box能确保容器的宽度计算包含padding，不会出现容器看起来比视口窄的情况。

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