Размер изображения в Read the Docs (маленькие изображения шириной)

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

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

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

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

.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 каждый раз, когда я хочу добавить небольшое изображение.

🤔 А знаете ли вы, что...
CSS поддерживает разнообразные селекторы, которые позволяют выбирать элементы на веб-странице.


425
1

Ответ:

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

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