为什么 flex 项目在 iOS 13 中被拉伸？

Question

这是codepen上的完整代码

    .Card {
      max-width: 20%;
      max-height: 100%;
      height: auto;
    }
   .Cards {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: space-around;
   }

该视图在除 iOS 13 之外的所有设备上看起来都不错，这看起来像是卡片被拉伸了。 在 iOS 13 上拉伸

有谁知道如何解决这一问题？ 谢谢 ！！！

Answer 1

CSS 的 max-width 和 max-height 属性效果更好，但许多浏览器不支持它们。

尝试对图像使用object-fit属性。

Answer 2

鉴于 iOS 15 现已发布，我认识到 iOS 13 不再是一个严重问题，但为了记录这个问题可以通过设置align-items: start;来解决align-items: start; 在您的.Cards容器上：