Limit the size of image

[Rongronggg9]

Pre: so huge, hard to read!

Post: fantastic

Note:

Why not style="max-width: ***"?
It is unsupported by GitHub. But style="width: ***" behaves nearly the same as the former in GitHub-flavored Markdown.

Why 8em?
It can be any reasonable value you like.

Why style="width: 8em" cannot unify the image size anywhere?
Just mentioned, it behaves nearly the same as style="max-width: 8em" in GitHub-flavored Markdown.

[yaniraton]

I think you're really right and it's really hard to read

[Schweinepriester]

Esp. for the tier images I agree (thought about that before, in #5), but do you know of a way to make the images in all tables the same size, preferably with the same value?
Because currently, also on your branch, the images in the "Achievements" table are being forced smaller than width: 8em; - namely 101px only instead of 128px.

EDIT: And also without crafting a custom <table>.

[Rongronggg9]

do you know of a way to make the images in all tables the same size, preferably with the same value?
EDIT: And also without crafting a custom <table>.

It seems impossible. GitHub does not really respect styles set by users but always adjusts sizes dynamically, that's why I said "style="width: 8em" behaves nearly the same as style="max-width: 8em" in GitHub-flavored Markdown". Here, the first table ("Achievements") contains columns with too many words, making GitHub dynamically adjust the image size. In such a case, setting style="width: 8em" effectively zooms out the images compared to before, but GitHub is not satisfied, so it zooms them out again...

Setting the width with other units won't help. Maybe making feedback to GitHub is the best choice.

---

You may prove my statements by comparing two pages rendering README.md with different box widths:

https://github.com/Rongronggg9/github-profile-achievements/tree/4baec4417d8f4b992dccde2983a5b9e85da340f8

and https://github.com/Rongronggg9/github-profile-achievements/blob/4baec4417d8f4b992dccde2983a5b9e85da340f8/README.md

[Schweinepriester]

Hrm, really unsatisfying currently.
I've been trying something like this:

achievements: width: 256px => 164px
=> tiers: 164px

which works to make them the same size, but then we'd have to adjust all values all time, meh.

Maybe eventually I have to experiment with a custom <table>.

For now I will only set width to the tier images, to match them to the size of the achievements when viewing https://github.com/Schweinepriester/github-profile-achievements (not the full width view), so approx 180px.

I will use your PR to give you props. Thank you! :)
Feel free to open another one if you have further ideas.

[Rongronggg9]

which works to make them the same size
approx 180px.

Just a reminder, the width of the box is also dynamic according to per user's screen size. So your patch may look like this:

[Schweinepriester]

Yeah, but that's at least less bad than it was, right?
So the tier images are now at most 180px, as opposed to before when they could grow even larger (to the full 296px), like your very first image.