3000x3000px img with 100% width on mobile Safari/iOS 说 img height 仍然是 3000px答案

【问题标题】：3000x3000px img with 100% width on mobile Safari/iOS says img height is 3000px still3000x3000px img with 100% width on mobile Safari/iOS 说 img height 仍然是 3000px
【发布时间】：2019-12-09 15:24:42
【问题描述】：

如果我使用调试开发工具在 Safari Mobile / iOS 中检查 img，它会显示一个非常高且细长的矩形，其宽度为 320 像素（iPhone 的宽度）但高 3000 像素。然而，图像并没有被拉伸，它的纵横比可见保持不变，所以看起来是正确的。但问题是图像的高度为 3000px。它的高度应该是 320 像素（在这种情况下是方形图像）。我在这里错过了什么？

body {
  width: 100vw;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  position: static;
}

section {
  width: 100vw;
  display: flex;
  padding: 64px;
}

<body>
  <section>
    <img src="myimg.svg" width='100%'>
  </section>
</body>

我还在 CSS 中旋转图像，如果有影响的话，在 animation 中使用 transform: rotate(...)。

【问题讨论】：

它在 chrome 中是否显示得很好？
这可能会帮助你stackoverflow.com/questions/39056537/…
这可能是 Safari 在保持弹性项目中的比例时遇到问题。如果您删除display:flex，它会按预期工作吗？（这不是解决方案，但至少有助于查明问题。）
你应该添加 img{max-width:100%;height:auto;}

标签： ios css mobile-safari

【解决方案1】：

您必须为img 指定height: auto 以确保缩放到宽度，因为将应用图像的原始高度。

<img src="myimg.svg" width='100%' style="height: auto;">

【讨论】：