Discord has problems displaying embedded images on smaller screens due to their set/fixed height and width. The current HTML structure for embedded images looks like the following:
Both, the anchor tag (<a>) and the image tag (<img>) have a set width and height. Also, the image tag is positioned absolute using a CSS class. This results in cut-off images if the screen width is smaller than the set width of the image.
I propose the following changes to the HTML structure and CSS classes which solve the cut-off issue and just scales down the images with the screen-width. The image dimensions should not be set twice. Instead, set only the height only on the image tag and remove the absolute positioning. Set element-height to auto which automatically scales it with the image's height. Use a max-width of 100% to scale down the embedded image on smaller screens.
Note: The HTML snippets are simplified (changed CSS class names, omitted other attributes) and don’t contain all the parameters of the real structure. However, the proposed solution has been tested on Discord Desktop using the Developer Tools by only modifying the mentioned properties.
Please sign in to leave a comment.