Safari 拉伸 flex 项目高度答案

【问题标题】：Safari stretching flex item heightsSafari 拉伸 flex 项目高度
【发布时间】：2021-05-09 21:20:55
【问题描述】：

我有一个 flex 容器，在那个容器中，我有一堆图像。使用 flexwrap 和 33% 的 flex-item 宽度，这可以很好地呈现图像……在 Chrome 中（也就是说，它们保持它们的纵横比）。然而，在 Safari 中，图像会在垂直方向上被拉伸，这看起来很糟糕。

有解决办法吗？

（注意：对于下面的代码 sn-p，你必须在 Chrome 和 Safari 中打开这篇文章才能看到我在说什么）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>

    <body>
        <div class="container">
            <img src='https://swipestack.s3.amazonaws.com/s/q/1.jpg' alt='1'>
            <img src='https://swipestack.s3.amazonaws.com/s/q/2.jpg' alt='2'>
            <img src='https://swipestack.s3.amazonaws.com/s/q/3.jpg' alt='3'>
            <img src='https://swipestack.s3.amazonaws.com/s/q/4.jpg' alt='4'>
            <img src='https://swipestack.s3.amazonaws.com/s/q/5.jpg' alt='5'>
            <img src='https://swipestack.s3.amazonaws.com/s/q/6.jpg' alt='6'>
            <img src='https://swipestack.s3.amazonaws.com/s/q/7.jpg' alt='7'>
            <img src='https://swipestack.s3.amazonaws.com/s/q/8.jpg' alt='8'>
        </div>
        
    </body>
    
    <style>
        .container{
            display: flex;
            flex-wrap: wrap;
            overflow: auto;
            width: 400px;
            height: 550px;
            padding: 10px;
            background-color: green;
        }
        .container > * {
            width: 33.33333%;
        }

    </style>
</html>

【问题讨论】：

标签： css image google-chrome flexbox safari

【解决方案1】：

你可以试试这个，只有当你给第一张和第二张图片的高度和其他图片一样高 475px 时才有效：

   <style>
    .container {
      width: 400px;
      height: 550px;
      padding: 10px;
      background-color: green;
      overflow: auto;
    }

    .container:first-child {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
    }
    .container > * {
      width: 33.33333%;
      height: auto;
    }
  </style>

【讨论】：

对不起，这似乎不起作用。使用建议的解决方案，您不再每行获得三个项目。此外，每个图像都有自己的高度，而不是具有相同的高度。
这很奇怪，它对我来说适用于 chrome 和 firefox...
我认为是 Safari 出了问题。我最终从使用 flexbox 切换到使用 css 网格，这似乎解决了我的问题。