Adjust image size based on the font size on Android Chrome
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;
}