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

Posted 2023-03-06

【中文标题】响应式布局：Safari 上的拉伸图像

【英文标题】：Responsive layout: stretched images on 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>

【参考方案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>