Automatically resize images in Google Chrome for certain websites/domains

Question

Some sites have very big images that makes it annoying to read. Adjust the width to "auto" in developer panel works and makes it easier for me to read. How can I automate this process? I don't care if other non-relevant images or icons are resized.

Original:

<img src="https://www.kayege.net/files/article/attachment/77/77453/19866320/828942.gif" border="0" width="100%" class="imagecontent">

Changes into:

<img src="https://www.kayege.net/files/article/attachment/77/77453/19866320/828942.gif" border="0" width="auto" class="imagecontent">

Example page: https://m.kayege.net/77_77453/19866320.html

Google Chrome 79.0.3945.88
macOS High Sierra 10.13.6

Answer 1

You can use userstyles. If you're familiar with userscripts (or Greasemonkey), it's a similar concept. Basically it lets you inject custom stylesheets into specific sites.

You'll need a browser addon such as Stylus (Firefox, Chrome).

You'll need basic familiarity with CSS and development tools, you seem to understand them already.

Here's a stylesheet that should work for the example you've used:

.imagecontent {
    width: auto !important;
}

(!important can be skipped sometimes, but it's necessary if the style would be overridden by inline styles or more specific selectors)