“width” and “height” CSS key values conflicts: How to remove “width” and “height” CSS keys via *.user.js script?

[pstein]

"width" and "height" CSS key values conflicts: How to remove "width" and "height" CSS keys via *.user.js script?

I have occasionally webpages with a code similar to

<img src="....." width="480" height="320">

when I right-click on one of the images on the webpage and select "imspect" then the WebDeveloper pane shows the following simplified CSS rules:

img { display: inside-block;   (don't know if this matters)
      height: auto;            (disabled/greyed out)
      width: auto;             (disabled/greyed out)
     }

     
img {
      height: auto;            
      width: auto;             
     }

* { box-sizing: border-box;  }   (don't know if this matters)

First observation: There are TWO CSS rules for <img> s.

Surprisingly the image shown on the webpage is not the size specified in the direct <img> style (=width="480" height="320").
It is much bigger.

What I do now I disabled the width and height keys  in the second css rule above.
Read: I removed the checks in the checkboxes left of them in WebDeveloper pane.

Result: Yes, they are disabled in the second CSS rule. But now Width and height in the first CSS rule become active.

Next step: I did the same for the first CSS rule: I removed the checks in the checkboxes left of them in WebDeveloper pane.

Then - and only then - the real width an height values specified directly in <img> element become active.
The image is shown in original dimension.

How can I (via an external *.user.js script applied later) undefine/remove all width and height keys in all <img> CSS rules ?

img { height: unset !important; width: unset !important; }

or

img { height: initial !important; width: initial !important; }

or

img { height: none !important; width: none !important; }

do NOT help.

Maybe a removal via javascript is necessary?

I am confused

Edited September 13, 2024 by pstein

[dsonesuk]

Difference is width and height in img element are attribute width and height and nothing to do with css. If they came within style attribute then it would be css. When you removed styling for both selectors of img it would revert to atrribute width and height.

[deenjerry]

On 9/13/2024 at 6:42 PM, pstein said:

"width" and "height" CSS key values conflicts: How to remove "width" and "height" CSS keys via *.user.js script?

I have occasionally webpages with a code similar to

<img src="....." width="480" height="320">

when I right-click on one of the images on the webpage and select "imspect" then the WebDeveloper pane shows the following simplified CSS rules:

img { display: inside-block;   (don't know if this matters)
      height: auto;            (disabled/greyed out)
      width: auto;             (disabled/greyed out)
     }

     
img {
      height: auto;            
      width: auto;             
     }

* { box-sizing: border-box;  }   (don't know if this matters)

First observation: There are TWO CSS rules for <img> s.

Surprisingly the image shown on the webpage is not the size specified in the direct <img> style (=width="480" height="320").
It is much bigger.

What I do now I disabled the width and height keys  in the second css rule above.
Read: I removed the checks in the checkboxes left of them in WebDeveloper pane.

Result: Yes, they are disabled in the second CSS rule. But now Width and height in the first CSS rule become active.

Next step: I did the same for the first CSS rule: I removed the checks in the checkboxes left of them in WebDeveloper pane.

Then - and only then - the real width an height values specified directly in <img> element become active.
The image is shown in original dimension.

How can I (via an external *.user.js script applied later) undefine/remove all width and height keys in all <img> CSS rules ?

img { height: unset !important; width: unset !important; }

or

img { height: initial !important; width: initial !important; }

or

img { height: none !important; width: none !important; }

do NOT help.

Maybe a removal via javascript is necessary?

I am confused

I also have the same question. I've been running into similar issues where hardcoded width and height attributes on <img> tags or persistent CSS rules interfere with how images are displayed, and the usual CSS overrides like unset, initial, or none don’t seem to take effect as expected—especially when the attributes are inline or deeply embedded. I’m looking for a reliable method via a .user.js script (like in a Tampermonkey or Greasemonkey environment) to remove or override all such width and height styles—both from the HTML attributes and from any conflicting CSS rules. If anyone has a working solution or script pattern that effectively clears these across all contexts, I’d appreciate the help!

[deenjerry]

On 9/13/2024 at 6:42 PM, pstein said:

"width" and "height" CSS key values conflicts: How to remove "width" and "height" CSS keys via *.user.js script?

I have occasionally webpages with a code similar to

<img src="....." width="480" height="320">

when I right-click on one of the images on the webpage and select "imspect" then the WebDeveloper pane shows the following simplified CSS rules:

img { display: inside-block;   (don't know if this matters)
      height: auto;            (disabled/greyed out)
      width: auto;             (disabled/greyed out)
     }

     
img {
      height: auto;            
      width: auto;             
     }

* { box-sizing: border-box;  }   (don't know if this matters)

First observation: There are TWO CSS rules for <img> s.

Surprisingly the image shown on the webpage is not the size specified in the direct <img> style (=width="480" height="320").
It is much bigger.

What I do now I disabled the width and height keys  in the second css rule above.
Read: I removed the checks in the checkboxes left of them in WebDeveloper pane.

Result: Yes, they are disabled in the second CSS rule. But now Width and height in the first CSS rule become active.

Next step: I did the same for the first CSS rule: I removed the checks in the checkboxes left of them in WebDeveloper pane.

Then - and only then - the real width an height values specified directly in <img> element become active.
The image is shown in original dimension.

This reminds me a bit of how CapCut handles image overlays in video projects. If a custom image (like a logo or sticker) is added, CapCut sometimes applies automatic scaling or effects unless you manually override them. Similarly, here, CSS rules seem to override the direct <img> attributes until all external styling is disabled.

How can I (via an external *.user.js script applied later) undefine/remove all width and height keys in all <img> CSS rules ?

img { height: unset !important; width: unset !important; }

or

img { height: initial !important; width: initial !important; }

or

img { height: none !important; width: none !important; }

do NOT help.

Maybe a removal via javascript is necessary?

I am confused

Is there anyone who can help me with this?

[dsonesuk]

If attributes including 'style' attribute use removeAttribute or setAttribute to set to specific value.

https://www.w3schools.com/jsref/met_element_removeattribute.asp

If css styling use css to target all img tags or specific class identifier and change to required.

Note: intial, unset? for height/width will usually set to default values of auto which will set image to original size or proportionately to fit parent element.