Jump to content

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


pstein

Recommended Posts

"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 by pstein
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...