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

【问题标题】：Responsive layout: stretched images on Safari响应式布局：Safari 上的拉伸图像
【发布时间】：2020-06-18 00:30:31
【问题描述】：

这是我的布局。

期望的行为是，当我垂直调整窗口大小时，图像会保持原始纵横比缩放。

我的代码在所有浏览器除 Safari 中都运行良好（您可以通过在不同浏览器中尝试 sn-p 来查看）。

你有解决办法吗？谢谢;)

.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>

【问题讨论】：

标签： html css image scale responsive

【解决方案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>

【讨论】：