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

Question

Here is the complete code on 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 之外的所有设备上的视图看起来都不错，看起来卡片被拉伸了。 Stretched on iOS 13

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

Answer 1

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

Answer 2

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

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