That’s certainly a large table, but it’s a long way of saying…
Bloodshard cap = 500 + (10 * your highest successful solo GR clearance)
It was just a test. Hence the title: Perusoe’s Testing Grounds. 
The data in the table is irrelevant. It could be anything.
Testing Tall Images
Centered and full height.
Syntax used:
<div align="center"><img src="https://i.imgur.com/bGfi2Ew.jpg" height="640"></div>
Produces this:
Well… That didn’t work. 
What are you trying to do, downsize it?
Edit: Nevermind, misread the post. Looks fine to me as it is.
Yeah. You can click on the image to see what I was trying to do. (But, I guess you figured that out).
It appears that these forums has a limit to image height. Or, maybe I used the wrong syntax. I was basing it on the “width” syntax. For example, using the image above, I can make the image narrower or wider.
Narrower
Syntax used:
<div align="center"><img src="https://i.imgur.com/bGfi2Ew.jpg" width="120"></div>
Produces this:
That seems to work. Maybe I’ve been going about this all wrong. I was just trying to keep from cropping the bottom of a tall image without resizing it. But, resizing the image would at least allow it to be seen in full.
Wider
Syntax used:
<div align="center"><img src="https://i.imgur.com/bGfi2Ew.jpg" width="480"></div>
Produces this:
Hmm… Well, that had an unexpected result. 
At least it confirms a maximum height for images. (Even more has been cropped by making the image wider). 
1 Like
New Test
Maximum Image Height
Syntax Used (120 Width):
<div align="center"><img src="https://i.imgur.com/bGfi2Ew.jpg" width="120"></div>
Produces:
Image resized to 120 x 320.
Syntax Used (130 Width):
<div align="center"><img src="https://i.imgur.com/bGfi2Ew.jpg" width="130"></div>
Produces:
Image resized to 130 x 347.
Syntax Used (140 Width):
<div align="center"><img src="https://i.imgur.com/bGfi2Ew.jpg" width="140"></div>
Produces:
Image resized to 140 x 373.
Syntax Used (160 Width):
<div align="center"><img src="https://i.imgur.com/bGfi2Ew.jpg" width="160"></div>
Produces:
Image resized to 160 x 427.
Syntax Used (188 Width):
<div align="center"><img src="https://i.imgur.com/bGfi2Ew.jpg" width="188"></div>
Produces:
Image resized to 188 x 500.
Syntax Used (225 Width):
<div align="center"><img src="https://i.imgur.com/bGfi2Ew.jpg" width="225"></div>
Produces:
Image resized to 225 x 600.
Okay, at 225 x 600 the image begins to crop.
Syntax Used (220 Width):
<div align="center"><img src="https://i.imgur.com/bGfi2Ew.jpg" width="220"></div>
Produces:
Image resized to 220 x 587.
Syntax Used (210 Width):
<div align="center"><img src="https://i.imgur.com/bGfi2Ew.jpg" width="210"></div>
Produces:
Image resized to 210 x 560.
Syntax Used (200 Width):
<div align="center"><img src="https://i.imgur.com/bGfi2Ew.jpg" width="200"></div>
Produces:
Image resized to 200 x 533.
Syntax Used (190 Width):
<div align="center"><img src="https://i.imgur.com/bGfi2Ew.jpg" width="190"></div>
Produces:
Image resized to 190 x 507.
Syntax Used (192 Width):
<div align="center"><img src="https://i.imgur.com/bGfi2Ew.jpg" width="190"></div>
Produces:
Image resized to 192 x 512.
Syntax Used (191 Width):
<div align="center"><img src="https://i.imgur.com/bGfi2Ew.jpg" width="191"></div>
Produces:
Image resized to 191 x 509.
190 x 507
Seems to be the maximum resolution for this image.
Note: I stress “this image” because we know in-game screenshots at 1920 x 1080 (and possibly higher resolutions) can be embedded. However, they are resized, height and width, automatically by these forums, keeping the aspect ratio without cropping.
Testing for maximum image width
Centered only.
Syntax used:
No “width” was specified, so the forum software automatically resized it, keeping the aspect ratio and allowing full view of the image.
Assumption: On automatic resizing, the maximum height should be ~507, according to my previous tests. However, if 507 is the maximum height, then based on my calculations, the maximum width for an image that is 1920 x1080 would be ~901. Or 901 x 507.
Using the example above, let’s try manually assigning a width and see if there’s a difference.
Syntax used:
<div align="center"><img src="https://i.imgur.com/R94Ii3n.jpg" width="901"></div>
Produces this:
And that seems to work.
Conclusion:
Maximum image resolution for these forums is 901 x 507 (16:9 aspect ratio). That means, with a 16:9 image resolution, the width is 1.78 times more than the height and the height is 0.56 less than the width.
The following GIF is 294 x 102.
Since the width is more than twice height I need to divide the width by the height to calculate a new resolution that does not exceed the maximum 901 width.
294 ÷ 102 = 2.88, so 507 x 2.88 = 1461, which is too wide.
102 ÷ 294 = 0.35, so 901 x 0.35 = 313. I should be able to post the GIF embedded above, specifying a width of 901, without cropping. (The height, at 313, will be well under the maximum height of 507).
Syntax used:
<div align="center"><img src="https://i.imgur.com/zkjZ5NT.gif" width="901"></div>
Produces this:
This GIF is now embedded at 901 x 313.
Conclusion:
The maximum size an image “window” (the viewing area), in these forums, is 901 x 507*.
* The width and height numbers were rounded to the nearest whole number.
Testing “height” syntax
It just occurred to me that the “height” label (code? tag?) might actually work.
If an image is wider than its height, then you use the “width” syntax to adjust the maximum width to 901. If the image is higher than its width, then you would use the “height” syntax to adjust the maximum height to 507.
And, of course, if an image has a width less than 901 and a height less than 507, no adjustment will be necessary.
So, taking the image of “Grey” I used above, I will experiment.
Here is the original image, without resizing. Only centering.
Syntax used:
<div align="center"><img src="https://i.imgur.com/bGfi2Ew.jpg"></div>
Produces this:
Original resolution: 240 x 640 and cropped. Since it is higher than it is wide, let’s try the “height” syntax instead of the “width” syntax I used previously.
Syntax used:
<div align="center"><img src="https://i.imgur.com/bGfi2Ew.jpg" height="507"></div>
Produces this:
YES!
Now my brain hurts. All that, just to arrive at a simple solution. Time to get back to my morning coffee. 
Addendum
Of course, I could have made it easier on myself:
So, from now on, I will use a maximum image resolution of 833 width and 500 height… If — I need to adjust an image resolution.
Final Note
Images I embed that are 1920 x 1080 are automatically resized to 833 x 468, whether I resize them or not.
The image I embedded of my temporary Demon Hunter, Grey, are originally 240 x 640 and automatically resized to 190 x 500, whether I resize it or not.
This is how I came up with a maximum image resolution for these forums being 833 x 500.
However, in practice and if I have to resize an image, my only concern is whether the image is too wide (>833 px) or too tall (>500 px). This will determine if I need to use the “width” syntax or the “height” syntax.
I say, I think your DH has been drinking.
She’s completely legless! 
1 Like
No, she’s not. Her legs are just “under the table”.
Diablo 3 Patch Notes
2 Likes
That could work as an ordered list as well. And if viewed on a mobile device, would work better. 
Still testing. Had trouble getting the links to work with advanced table. Had to revert to simple table. Will try your suggestion later. Trying to keep it compact… without creating a wall-of-text… if possible.
Diablo 3 Patch Notes
2 Likes
If you want it compact, put it inside a flyout.
I don’t even know what that is. Unless you mean the details code.
Yep, that’s the one. That’s how I compacted the cosmetics guide from 40+ pages to just a few until you open it up. The Details code has two modes. By default it is closed (compacted). Appending the open argument will force it to default to an opened state. Useful for niche content, or for when you’re testing your code within the forum editor window.
I just went ahead and did this: D3:RoS Patch Notes & Themes Wiki
Yes. I’ve used it before… in this thread in fact:
It gets really fun when you embed entire tables with their own images and resizing in each row too. But if you aren’t careful it can get overwhelming quickly on the coding side. If you think I’m kidding, check the raw code from the cosmetics guide (note: it is one gigantic run-on code block in appearances only, required to eliminate line breaks between flyout links - there are fifteen distinct segments, each updated individually and then concatenated into a final master file).
No thank you. And I know you’re not kidding.
I have to keep it simple. I’m an old man and still having trouble with my native language. (I don’t need to learn a new one).