Menu
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>
423
To set a new default zoom level, click on the Menu button in the top-right of the Chrome browser, then click Settings. Type 'Page Zoom' in the search box or click on Appearance on the left-hand side. Click on the drop-down menu for Page zoom and select a new default zoom level.
Here is a CodePen with the proposed solution implemented. I've tested it in Browser stack and all seems to work. If you can provide a link to the codebase or sample that might help with reproducing the error.
BrowserStack :: Chrome on Galaxy S5
https://codepen.io/uxmfdesign/pen/JjPqBYO
CSS block
.test-logos {
display: inline-block;
}
.test-logos__img-2em {
height: 2em;
}
.test-logos__img-3em {
height: 3em;
}
.test-logos__img-5em {
height: 5em;
}
HTML block
<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>
I'm not sure if this will work specifically on Android, but in many cases I've found you need to set a base size for the image and use a max declaration to stop the growth.
.logo > img {
height: 100vh;
max-height: 2.5em;
}
The other issue could be that you are not treating the image as an inline block. try adding
.logo > img {
display: inline-block;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
