阅读文档时的图像尺寸（较小的图像宽度）

Question

我正在使用MkDocs通过Markdown生成文档，主题为“阅读文档”。

但是，我无法通过在手机上放大来获取小图像。

我认为这与“阅读文档” 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以确保将其应用于所有图像，因此我不必每次想添加小图像时都在Markdown文件的中间添加HTML标记。

Answer 1

只需修改媒体查询（或使用更高的specificity创建新规则）即可将图像的width设置为auto来缩小视口：

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