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.


<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

1 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)

  • I'm sorry that I actually don't know anything about CSS and just a tiny bit about dev panel. I'm not sure how exactly should I use userstyles. Can you explain a bit or point me to some resources?
    – Joy Jin
    Oct 6, 2020 at 9:30
  • 1
    @JoyJin I've added an example, hope that helps!
    – gronostaj
    Oct 6, 2020 at 9:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.