The images in revision cards are bigger than expected.

[seanlip]

Describe the bug
All the images in one of the Multiplication revision cards on the app are much bigger than expected. (Web page for reference: https://www.oppia.org/learn/math/multiplication/revision/multiplication-techniques).

It appears that the issue is that the Android app is using the size dimensions in the SVG file to calculate the correct size for the image, but on Web the sizing is actually determined by the filename. On Android we should use the filename sizes too (scaled appropriately to account for display density and expected distance from the user's eyes).

To Reproduce

In the production version of the app, go to Multiplication > Revision card > Techniques of multiplication.

Expected behavior
The images in this card should be smaller.

Environment

• App version: 0.10-alpha_kenya

[BenHenning]

[NOTE: Please ignore this comment. The original comment (reproduced below for posterity) no longer applies to this issue since the original issue was split up and the relevant part of it moved to #4859.]

…

--- This will come down to the markup. In this case, it seems there is no paragraph break for the image. I suspect it works on web because of the presence of CSS which we don’t have on Android. This is actually tricky since it isn’t obvious from the markup alone when images should be inline vs block rendered (given that some images, like LaTeX are often inline). How exactly does web decide from a styling perspective @seanlip?

[BenHenning]

For the SVG sizing, this is a case where the app is preferring using the SVG's self-reported size properties rather than the filename (like web). In order to use these, we'll need to interpret these pixels as a density-independent pixel using a conversion based on the uploader's screen information.

To do the second part @seanlip we'll need to know your monitor's screen resolution & PPI to make the calculation.

[seanlip]

PPI = 81.589
Screen resolution = 1920 ×1080