css - 阅读文档中的图像大小(小图像宽度)

Question

我正在使用 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 来确保它应用于所有图像，这样我就不必在每次添加小图像时都在 Markdown 文件的中间添加这个 HTML 标记.

Answer 1

简单地修改媒体查询(或创建一个更高的 specificity 的新规则)以将图像的 width 设置为 auto 用于窄视口(viewport):

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