Я использую 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 поддерживает разнообразные селекторы, которые позволяют выбирать элементы на веб-странице.
Просто измените медиа-запрос (или создайте новое правило с более высоким специфичность), чтобы установить width
изображений на auto
для узких окон просмотра:
@media screen and (max-width: 768px) {
img {
width: auto;
}
}