为特定 class 禁用 CSS Height:auto 和 Width:auto 的行为

Question

我正在使用 TinyMCEv4 的解决方案，它具有内置的图像工具栏插件。

当用户在所见即所得编辑器中调整图像大小时，图像的 HTML 会通过图像元素上的图像 width/height 属性进行相应更新：

<img src="img.jpg" alt="Image" width="300" height="200">

如果用户在 TinyMce 的 WYSYWG 编辑器中通过将图像大小加倍来调整图像大小，html 将更新为：

<img src="img.jpg" alt="Image" width="600" height="400">

问题是 - 我有一些 CSS 阻止了 width 和 height 属性的工作。出于响应目的，以下 CSS 应用于全站所有图像：

img {
    width: 100%;
    height: auto;
}

有没有办法扭转这些 CSS 规则，以便 width/height 属性适用于特定 class 中的图像？

Answer 1

这是对 not-too-distant 未来的回答。

级联层即将推出。因为从 HTML 属性获得的表示性提示被认为属于作者层以下的级联优先级，所以我们可以使用 revert-layer 撤消此处的分配设置。

您已经可以在 Firefox 中执行此操作。 Chromium 和 Safari 应该很快就会实现，如果还没有的话。

img {
  width: 100%;
  height: auto;
}
img[height] {
  height: revert-layer;
}
img[width] {
  width: revert-layer;
}

<img src="https://via.placeholder.com/100" alt="Image" width="300" height="200">

一般来说，您会在与需要恢复的设置相同的图层中使用 revert-layer。在这里，我们所有的 CSS 都在“未分层”层中。

Disabling the behaviour of CSS Height:auto and Width:auto for a specific class