Размер изображения на Read Docs (малая ширина изображения) - PullRequest
Новая
       25

Размер изображения на Read Docs (малая ширина изображения)

0 голосов
/ 06 ноября 2018

Я использую MkDocs для создания документов, используя Markdown, и тему Read the Docs.

Однако у меня возникают проблемы с получением небольших изображений на мобильных телефонах.

Я думаю, что это связано с CSS для чтения документов, но у меня возникают проблемы с пониманием того, что мне следует сделать, чтобы изменить поведение настройки width:100% на маленьких экранах.

CSS, примененный к определенному изображению на большом экране (с использованием проверки Chrome): 

.rst-content img {
    max-width: 100%;
    height: auto !important;
}
img {
    max-width: 100%;
    height: auto;
}

Но если я уменьшу экран, я получу этот дополнительный CSS: 

@media screen and (max-width: 768px)
img {
    width: 100%;
    height: auto;
}

Я могу вручную установить размер изображения, например: 

<img src="/something.png" style="width: 25px">

Но я бы предпочел, если бы я мог создать немного CSS, чтобы гарантировать, что это применяется ко всем изображениям, поэтому мне не нужно добавлять этот HTML-тег в середине файла Markdown каждый раз, когда я хочу добавить маленькое изображение .

1 Ответ

0 голосов
/ 06 ноября 2018

Просто измените медиа-запрос (или создайте новое правило с более высокой специфичностью ), чтобы установить width изображений на auto для узких областей просмотра: 

@media screen and (max-width: 768px) {
  img {
    width: auto;
  }
}
...