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

Question

我正在关注根据字体大小调整图像大小以根据文本大小更改图像大小，但与 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>

Answer 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;
}

Answer 2

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

已编辑

我认为Font size的行为与 chrome 中的其他宽度不同。

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

问题描述

2 个解决方案

解决方案1
3 2019-09-27 13:09:00

解决方案2
0 已采纳 2019-10-05 19:02:47

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

问题描述

2 个解决方案

解决方案1 3 2019-09-27 13:09:00

解决方案2 0 已采纳 2019-10-05 19:02:47

解决方案1
3 2019-09-27 13:09:00

解决方案2
0 已采纳 2019-10-05 19:02:47