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

Question

这是我的布局。

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

我的代码在除 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>

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

Responsive layout: stretched images on Safari

html

css

image

scale

responsive