css - 阅读文档上的图像大小（小图像宽度）

Question

我正在使用MkDocs使用 Markdown 生成文档，主题为 Read the Docs。

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

我认为这与 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 以确保将其应用于所有图像，我更愿意，这样我就不必在每次想要添加小图像时在 Markdown 文件的中间添加这个 HTML 标记。

score 0 · Accepted Answer

只需修改媒体查询（或创建具有更高特异性的新规则）以将width图像设置auto为窄视口：

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

1 回答 1