0

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

1 Answer 1

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)

2
  • 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
    Commented Oct 6, 2020 at 9:30
  • 1
    @JoyJin I've added an example, hope that helps!
    – gronostaj
    Commented Oct 6, 2020 at 9:38

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .