如果我使用调试开发工具在 Safari Mobile/iOS 中检查 img，它会显示一个非常细长的矩形，宽 320 像素(iPhone 的宽度)但高 3000 像素。然而，图像并未拉伸(stretch)，它的纵横比明显保持不变，因此看起来不错。但是错误的是图像的高度是 3000px。它的高度应该是 320px(在这种情况下是方形图像)。我在这里缺少什么？
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(...)。
最佳答案
您必须为 img 指定 height: auto 以确保缩放到宽度，因为将应用图像的原始高度。
<img src="myimg.svg" width='100%' style="height: auto;">
关于ios - 3000x3000px img 在移动设备上具有 100% 的宽度 Safari/iOS 表示 img 高度仍然是 3000px，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57302093/