Adjust image size based on the font size on Android Chrome

Question

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>

what happens if you set `body, .logos {font-size: 16px;}` first? — Mark Schultheiss, Sep 27 '19 at 12:18
@MarkSchultheiss I don't understand. Could you elaborate a bit? Are you suggesting add a default font size to `.logos`? — Rahn, Sep 27 '19 at 12:25
I tested it in Chrome on Mac and Android and it worked just fine. The logo didn't change it's size like on your example. — Furkan Poyraz, Sep 27 '19 at 12:29
@FurkanPoyraz That's the problem. How do I make image's size change according to text size? — Rahn, Sep 27 '19 at 12:31
@Rahn That's exactly what you're doing with the em unit. Your logo should be 2.5x larger than your base font size (which equals to 1em). http://jsfiddle.net/Lavpzu01 — Furkan Poyraz, Sep 27 '19 at 12:40
@FurkanPoyraz Yes, that's why I use `em`. I am asking how do I achieve the same result on Android. — Rahn, Sep 27 '19 at 12:47
@Rahn yes, set a default since it is 16px on most browsers (not all, used to be worse) so that should cascade into the child of that block element assuming nothing else gets in play here. i.e just that CSS I noted above the other you have — Mark Schultheiss, Sep 27 '19 at 16:56
interesting, your gh page worked on my iphone 6 in both Brave and Safari. — Mason, Oct 05 '19 at 16:20
This might be due to font-boosting. Ever heard of that? https://stackoverflow.com/questions/13430897/how-to-override-font-boosting-in-mobile-chrome — Mr. Hugo, Oct 05 '19 at 18:42

Mike Freeman · Answer 1 · 2019-09-29T17:37:34.113

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

Sorry but could you have a look at my update, your solution doesn't work for my case. — Rahn, Sep 27 '19 at 20:45

NayDwe · Accepted Answer · 2019-10-05T19:19:48.753

0

According chrome behaviour, body's width will change until screen 980px.If your screen is under 979px.Body's width fixed in 980px.So, Image's size will not change because em unit is calculating based on parent.Images size will be small when screen is smaller.If you want to see normal width, you need to put <meta name="viewport" content="width=device-width, initial-scale=1"> in head tag.

Edited

I think Font size's behaviour is different with other's width in chrome.

edited Oct 05 '19 at 19:19

answered Oct 05 '19 at 19:02

NayDwe

649
3
11

Don't understand the detail entirely, but it fixes! – Rahn Oct 05 '19 at 19:36
When we create some webpage with %, em ,rem, it will correctly work above 980px browser size.Body width is depended on browser size.When browser width is under 979px, body width is not depended on browser size anymore.Because body width fixed in 980px.When screen sizes are small, contents are reduces scale down to enter screen size.So we want to see normal size for all elements.We have to use device-width.It is the same with responsive.I hope to understand.Sorry for bad explain. – NayDwe Oct 07 '19 at 04:38

Adjust image size based on the font size on Android Chrome

2 Answers2