响应式布局：Safari 上的拉伸图像

Question

这是我的布局。

所需的行为是，当我垂直调整窗口大小时，图像会缩放并保持原始宽高比。

我的代码在除 Safari 之外的所有浏览器中都运行良好（您可以通过在不同浏览器中尝试该代码片段来看到它）。

你有解决方案吗？谢谢 ;）

.wrap-container{

  width: 100%;

  display: flex;

  justify-content: center;

  background-color: yellow;

  height: 55vh;

}

.wrap{

  width: 700px;

  background-color: aqua;

  display: flex;

  justify-content: flex-start;

  align-items: flex-end;

  padding-top: 64px;

}

.wrap img{

    height: 100%;

    width: auto;

    max-width: 300px;

    max-height: 300px;

}

<div class="wrap-container">

  <div class="wrap">

    <img src="https://via.placeholder.com/300"/>

  </div>

</div>

Answer 1

添加flex: 0;到图像上.wrap-container{&nbsp; width: 100%;&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; background-color: yellow;&nbsp; height: 55vh;}.wrap{&nbsp; width: 700px;&nbsp; background-color: aqua;&nbsp; display: flex;&nbsp; justify-content: flex-start;&nbsp; align-items: flex-end;&nbsp; padding-top: 64px;}.wrap img{&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; width: auto;&nbsp; &nbsp; flex: 0;&nbsp; &nbsp; max-width: 300px;&nbsp; &nbsp; max-height: 300px;}<div class="wrap-container">&nbsp; <div class="wrap">&nbsp; &nbsp; <img src="https://via.placeholder.com/300"/>&nbsp; </div></div>