响应式布局：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{

  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;

    flex: 0;

    max-width: 300px;

    max-height: 300px;

}

<div class="wrap-container">

  <div class="wrap">

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

  </div>

</div>