I'm following Adjust image size based on the font size to change image size according to text size, but have quite different results from macOS and Android (both with Chrome).
On Desktop's Chrome:
On Android's Chrome:
You can see that compared with text, the image on Android is significantly smaller. How do I fix so the image could be 2.5 larger than the text on Android?
Looks like an issue with GitHub page?
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>
from Adjust image size based on the font size on Android Chrome
No comments:
Post a Comment