禁用CSS高度的行为:自动和宽度:针对特定类的自动

Question

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

当用户在WYSWYG编辑器中调整图像大小时，通过图像元素上的图像宽度/高度属性相应地更新图像的HTML：

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

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

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

问题是-我有一些CSS，它阻止宽度和高度属性的工作。以下CSS应用于站点范围内的所有图像，用于响应目的：

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

是否有办法逆转这些CSS规则，使宽度/高度属性对特定类中的图像起作用？

Answer 1

这是一个不太遥远的未来的答案。

级联层即将到来。由于从HTML属性获得的表示提示被认为属于作者层下面的级联优先级，所以我们可以在这里使用revert-layer撤消分配的设置。

您已经可以在Firefox中这样做了。铬和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都在“分层”层中。