Html 为特定类禁用 CSS Height：auto 和 Width：auto 的行为

发布于02月22日

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

当用户在所见即所得编辑器中调整图像大小时，图像的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规则，使宽度/高度属性适用于特定类中的图像？

推荐答案

这是对不太遥远的future 的回答.

Cascade Layers号快要来了.由于从HTML属性获得的表示式提示被视为属于Author层下面的级联优先级，因此我们可以使用revert-layer来undo撤消此处指定的设置.

你已经可以在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都在"未分层"层中.