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

Question

I'm utilising TinyMCEv4 for a solution which has the built in image toolbar plugin.

When a user resizes an image within the WYSWYG editor, the HTML for the image is updated accordingly via the image width/height attributes on the image element:

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

If the user were to resize the image by doubling the size of it within the WYSYWG editor of TinyMce, the html would is updated to:

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

The problem is - I've got some CSS which prevents the width and height attributes from working. The following CSS is applied to all images sitewide, for responsive purposes:

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

Is there a way to reverse these CSS rules so that the width/height attributes work for images within a specific class?

Answer 1

This is an answer for the not-too-distant future.

Cascade Layers are coming. Because the presentational hints that are obtained from the HTML attributes are considered as belonging to a cascade precedence below author layers, we can use revert-layer to undo the assigned setting here.

You can already do this in Firefox. Chromium and Safari should have implementations shortly, if not already.

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">

In general, you would use revert-layer in the same layer as the settings you needed to revert. Here, all our CSS is in the "unlayered" layer.