在 iOS 上的 Safari 中调整图像大小扭曲答案

【问题标题】：Image resizing distorted in Safari on iOS在 iOS 上的 Safari 中调整图像大小扭曲
【发布时间】：2020-09-29 11:44:58
【问题描述】：

我的目标是根据页面宽度按比例拉伸图像。我使用以下 HTML：

<div class="idv algn_c">
  <img src="image-path.png" draggable="false">
</div>

使用以下 CSS：

.idv{
    display: flex;
}
.idv img{
    max-width: 100%;
    height: auto;
    user-select: none;
}
.algn_c{
    justify-content: center;
    margin: 1.5em auto;
}

这在 Chrome、FF、Edge 上运行得非常好，并且可以很好地缩放图像（根据其纵横比）：

但是当我在我的 iPhone 上的 Safari (iOS v.13.4.1) 上尝试它时，它给了我这个扭曲的图像：

我做错了什么？

编辑：刚刚意识到我没有提到该文档具有以下元标记：

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

【问题讨论】：

标签： html css ios safari flexbox

【解决方案1】：

@c00000fd 首先添加这个元标记<meta name="viewport" content="width=device-width, initial-scale=1.0"> 那么你必须使用 .idv {align-items: start;} .idv img{ width: 100%; } 那么您的图像将不会被拉伸。希望对你有帮助

【讨论】：

谢谢。实际上将align-items: start; 添加到.idv 可以为Safari 修复它。问题是为什么？我需要那个align-items: 选择器，是我没有使用它的错吗？你能解释一下吗？
@c00000fd，您正在使用 CSS flex，因此您的所有 div 将获得 100% 的高度并且将被拉伸。这就是 align-items CSS 正确对于显示 flex 很重要。如果你不使用它，那么你将面临一个问题。您可以检查此 autoprefixer.github.io 以获得 CSS 前缀。希望对你有帮助

【解决方案2】：

找到布局设计的宽度，并在样式表中指定以下内容：

body {
  min-width: (layout width)px;
}

如果这不起作用，请将以下内容添加到您的 html 部分：

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

如果这不是问题，请尝试向图像添加一个容器，其中图像适合该容器的大小，并事先使用<div> 调用该容器。在容器中，指定align-items: flex-start（也可以替换为start 或self-start）。像这样：

.idv {
  display: flex;
}

.idv section:first-child {
  display: flex;
  align-items: flex-start;
}

.idv img {
  width: 240px;
  /* Insert the actual width of your image here */
  height: auto;
}

<div class="idv">
    <img src="image-path.png">
</div>

用flex-direction: column; 切换出align-items: flex-start; 应该也可以。

【讨论】：

谢谢。我最初确实有 viewport 元标记。忘记提了。然后尝试了您的min-width 建议，但没有帮助。
您是否尝试过使用 align-items 属性将容器添加到 CSS 中？
没有。对不起。我不确定我知道你在说什么。
实际上，你几乎明白了。更新了我的答案。如果这不起作用，请尝试添加 flex-direction: column;。
和我问其他人的问题一样。将 align-items: start; 添加到 .idv 可以为 Safari 修复它。无需做任何其他事情。问题是，为什么我需要那个 align-items，它只是 Safari 的东西吗？

【解决方案3】：

为了简化答案：

如果你创建这样的东西：

<div style='display:flex' class='idv'>
  <img src="something.jpg" width="x" height="x" />
</div>

.idv div 默认使用align-items:stretch。

要解决失真问题，只需在.idv 中添加align-items:flex-start 或align-items:center 即可解决此失真问题。否则height:auto 或任何其他height:xx 将变得无用。

【讨论】：

【解决方案4】：

就我而言，这是一个填充问题：在父元素上设置padding: 0 会正常显示100% 大小的图像。

【讨论】：