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

HTML & CSS
1

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

Peter

2

width=“480” height=“320” - Those are called attributes and not css styles as such. Attributes for height and width will take second place to any css styles that have been applied. (Otherwise CSS would be useless as originally before css was invented all elements were designed using attributes).

However, the attributes for an image’s width and height should be present in the html as that allows the browser to know the real size of the image before it downloads it even if later you change its size with css. Otherwise the browser has to wait while the image loads to allocate the space (or work out what the css version should look like).

There is no need to remove the image attributes for height and width. However those attributes should be the intrinsic width and height of that image and not something you made up to fit your page. They must be the real size of the image.

If in your css you have defined:

img { 
      height: auto;            
      width: auto;             
     }

That means that the image will assume its natural height and width and ignore any attributes that you may have set. If as mentioned above you have used the correct sized attributes then there will be no change. The image’s size is only different if you have put the wrong dimensions in the attributes to start with.

However, rarely do you want an image to only be its actual size as a 480px width image will not fit on a 320px width screen etc. Therefore most images are resized responsively and will change their width (within limits) based on their container and viewport size etc.

Usually if you want images their actual size you would set a max-width:100% to avoid the image poking out of its container and allowing it to scale smaller

e.g.

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

Or you may want an image to scale larger and smaller as required and you would use:

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

Generally though you wouldn’t do that for all images but be a bit more selective on context.

There isn’t a one size fits all approach but it seems to me that you are attempting something that is not necessary or is the wrong approach.

What is it that you want to do exactly?

Why do you think that you need to remove the css property/values for the image? Is it that you want some ‘made up’ size attributes to force the size of the image?

No one is doing this so I feel you may be creating a problem that should not exist.

You could revert to a computed value which will be the values set in the image attribute like this:

img { 
   width:revert-layer;    
   height: revert-layer;                         
  }

However, I’ve never seen anyone use that in 25 years so I feel there is a different scenario you are trying to overcome:)

2 Likes
4

@PaulOB:

Great! This is the solution:

revert-layer

background:

Occasionally I want to print webpages into a *.png or into a *.pdf file.
Unfortunately some of the webpages contain embedded big, fat (huge) photos or images which are much larger than necessary.
So one page in PDF file is filled with only one phone.

Its a clear sign of a stupid layouters which do not pay attention to the needs of their readers.

What can I do in such a scenario?

I use the well know, extremely useful in-place webpage editor WebExtension (for Firefox) freely available from here:

  • I enable the editor for the current webpage
  • then click on the large image
  • then drag one of the corner image to the desired much smaller size.
  • ready (for better print)

This work for approximately 95% of all webpages.

Unfortunately there are occasionally webpages out there from even more stupid layouters.
They setup CSS style sheets which forces the images to be stretched to the dimensions of an outer/higher element.

This has something to box with box-sizing: border-box
Or “flex” layout or whatever.

So when try to resize photos with Page hacker they are switching immediately back to their initial fat image size. Very bad

I was trying to change <img> definitions like you mentioned.
It didn’t help

…and then I read your

width:revert-layer;

suggestion.

When I applied this value (via a *.user.js script) to the current webpage then the direct element attributes get
priority over CSS…and I can resize images with Page Hacker.

Thank you again

1 Like
5

Thanks for the help! ive been facing the same issue as well.

6

In-place webpage editor: The browser developer console. Which is already in every major browser without downloading things.