Отрегулируйте размер изображения в зависимости от размера шрифта в Android Chrome - PullRequest
Новая
       51

Отрегулируйте размер изображения в зависимости от размера шрифта в Android Chrome

4 голосов
/ 27 сентября 2019

Я слежу Отрегулируйте размер изображения в соответствии с размером шрифта , чтобы изменить размер изображения в соответствии с размером текста, но у MacOS и Android (оба с Chrome) результаты совсем другие.

На рабочем столе Chrome:

enter image description here

На Android Chrome:

enter image description here

Вы можете видеть, что по сравнению с текстом изображение на Android значительно меньше.Как исправить, чтобы изображение могло быть в 2,5 раза больше текста на Android?

Похоже, проблема со страницей 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>

1 Ответ

1 голос
/ 27 сентября 2019

Вот CodePen с реализованным предложенным решением.Я проверил это в стеке браузера, и все, кажется, работает.Если вы можете предоставить ссылку на кодовую базу или пример, который может помочь с воспроизведением ошибки.

BrowserStack :: Chrome на Galaxy S5

enter image description here

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,но во многих случаях я обнаружил, что вам нужно установить базовый размер изображения и использовать объявление max, чтобы остановить рост.

.logo > img {
    height: 100vh;
    max-height: 2.5em;
}

Другая проблема может заключаться в том, что вы не рассматриваете изображение как встроенный блок.попробуйте добавить 

.logo > img {
    display: inline-block;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...