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?
CodePudding user response:
Maybe you can specify it as follow:
img:not([width])
, but this would be applied to all image elements that have a set width to them.
img:not([width]) {
width: 100%;
height: auto;
}
<p>Original image is 200x300, here doubled to 400x600</p>
<img src="https://picsum.photos/200/300" alt="" width="400" height="600">
CodePudding user response:
This is an answer for the not-to-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.