flex布局和safari

[innerWang]

页面的banner区域的内容使用flex布局，在Chrome下正常，但是在safari下会有图片高度未按比例缩放的问题。

需求： left-part 要和 topicImg 等高，且topicImg 保持比例

<div class="cont">
  <div class="left-part">
    <img  src="xxx" alt="logo"/>
    <h4>生态发展</h4>
  </div>
  <img  src="xxxxxx" alt="topicImg" class="topicImg"/>
</div>

<style>
  .cont{
    display:flex;
    justify-content:space-between;
  }
  .topicImg{
    width: 200px;
  }
</style>

将其修改为：

<div class="cont">
  <div class="left-part">
    <img  src="xxx" alt="logo"/>
    <h4>生态发展</h4>
  </div>
  <div class="topicImgWrap">
    <img  src="xxxxxx" alt="topicImg" class="topicImg" />
  </div>
</div>

  .cont{
    display:flex;
    justify-content:space-between;
  }
  .topicImgWrap{
    display:flex;
    align-items: flex-start;  // 不使用默认的 stretch 即可
    width: 200px;
  }

  .topicImg {
     width: 100%;
  }

或者使用如下样式：

  .cont{
    display:flex;
    justify-content:space-between;
  }

  .topicImg {
     display: block;
     width: 200px;
  }