根据 Android Chrome 上的字体大小调整图像大小答案

【问题标题】：Adjust image size based on the font size on Android Chrome根据 Android Chrome 上的字体大小调整图像大小
【发布时间】：2020-01-27 18:27:14
【问题描述】：

我正在关注 Adjust image size based on the font size 以根据文本大小更改图像大小，但与 macOS 和 Android（均使用 Chrome）的结果完全不同。

在桌面的 Chrome 上：

在 Android 的 Chrome 上：

您可以看到，与文字相比，Android 上的图像要小得多。如何解决，使图像可能比 Android 上的文本大 2.5？

看起来像是 GitHub 页面的问题？

https://s999inf.github.io/imagezoom/

https://github.com/s999inf/imagezoom/blob/master/index.html

<!DOCTYPE html>
<html>
<head>

<style>
body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: subpixel-antialiased;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.logos > img {
    display: inline-block;
    height: 100vh;
    max-height: 5em;
}
.test-logos {
    display: inline-block;
}
.test-logos__img-2em {
    height: 2em;
}
.test-logos__img-3em {
    height: 3em;
}
.test-logos__img-5em {
    height: 5em;
}
</style>

</head>

<body>
copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text

copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text

copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text


<div class="test-logos">
    <img class="test-logos__img-2em" src="https://via.placeholder.com/16x16">
    <img class="test-logos__img-3em" src="https://via.placeholder.com/16x16">
    <img class="test-logos__img-5em" src="https://via.placeholder.com/16x16">
</div>


<div class="logos">
    <img src="https://via.placeholder.com/16x16">
    <img src="https://via.placeholder.com/16x16">
    <img src="https://via.placeholder.com/16x16">
</div>

</body>

</html>

【问题讨论】：

如果先设置body, .logos {font-size: 16px;}会发生什么？
@MarkSchultheiss 我不明白。你能详细说明一下吗？您是否建议为.logos 添加默认字体大小？
我在 Mac 和 Android 上的 Chrome 中对其进行了测试，效果很好。徽标没有像您的示例那样改变它的大小。
@FurkanPoyraz 这就是问题所在。如何根据文字大小改变图片大小？
@Rahn 这正是您使用 em 单元所做的。您的徽标应比基本字体大小（等于 1em）大 2.5 倍。 jsfiddle.net/Lavpzu01

标签： javascript html css google-chrome cross-platform

【解决方案1】：

这是一个实施了建议的解决方案的 CodePen。我已经在浏览器堆栈中对其进行了测试，似乎一切正常。如果您可以提供可能有助于重现错误的代码库或示例的链接。

BrowserStack :: Galaxy S5 上的 Chrome

https://codepen.io/uxmfdesign/pen/JjPqBYO

CSS 块

.test-logos {
    display: inline-block;
}

.test-logos__img-2em {
    height: 2em;
}

.test-logos__img-3em {
    height: 3em;
}

.test-logos__img-5em {
    height: 5em;
}

HTML 块

<p>
    copy text copy text copy text copy text copy text <img class="test-logos__img-2em" src="https://via.placeholder.com/16x16"> copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text
</p>
<p>
    copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text <img class="test-logos__img-3em" src="https://via.placeholder.com/16x16"> copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text
</p>
<p>
    copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text <img class="test-logos__img-5em" src="https://via.placeholder.com/16x16"> copy text copy text copy text copy text copy text copy text copy text copy text copy text copy text
</p>
<div class="test-logos">
    <img class="test-logos__img-2em" src="https://via.placeholder.com/16x16">
    <img class="test-logos__img-3em" src="https://via.placeholder.com/16x16">
    <img class="test-logos__img-5em" src="https://via.placeholder.com/16x16">
</div>

我不确定这是否适用于 Android，但在许多情况下，我发现您需要为图像设置基本尺寸并使用最大声明来阻止增长。

.logo > img {
    height: 100vh;
    max-height: 2.5em;
}

另一个问题可能是您没有将图像视为内联块。尝试添加

.logo > img {
    display: inline-block;
}

【讨论】：

抱歉，您能否看看我的更新，您的解决方案不适用于我的情况。

【解决方案2】：

根据 chrome 的行为，body 的宽度会一直变化到屏幕 980px。如果您的屏幕低于 979px。 Body 的宽度固定在 980px。因此，Image 的大小不会因为 em 单位是基于 parent 计算而改变。屏幕较小时图像尺寸会变小。如果您想看到正常宽度，您需要放置 <meta name="viewport" content="width=device-width, initial-scale=1"> 在 head 标签中。

编辑

我认为 字体大小 的行为与 chrome 中的其他宽度不同。

【讨论】：

不完全了解细节，但它解决了！
当我们用 %, em ,rem 创建网页时，在 980px 以上的浏览器尺寸下它会正常工作。正文宽度取决于浏览器尺寸。当浏览器宽度低于 979px 时，正文宽度不取决于浏览器尺寸不再。因为正文宽度固定在980px。当屏幕尺寸较小时，内容会缩小比例以进入屏幕尺寸。所以我们希望看到所有元素的正常尺寸。我们必须使用设备宽度。它是一样的有响应。我希望能理解。抱歉解释不好。