image.png

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>safari-flex-img</title>
  6.   <style>
  7.     .flex {
  8.       display: flex;
  9.       /*align-items: center;*/
  10.     }
  12.     .img {
  13.       width: 30%;
  14.     }
  15.   </style>
  16. </head>
  17. <body>
  18. <img class="img" src="./haha.jpeg" alt="">
  19. <div class="flex">
  20.   <img class="img" src="./haha.jpeg" alt="">
  21. </div>
  22. </body>
  23. </html>

解决方案

  1. 将 flex 下的 img 以 height 为基准，而不是 width。
  2. 将 flex 的包裹元素设置 align-items: center。