From f0c7913ec3726e995dbbfde75b5ab24e07984efd Mon Sep 17 00:00:00 2001 From: Robin Townsend Date: Sat, 22 Jan 2022 12:00:49 -0500 Subject: [PATCH] Fix excessive padding on inline images Signed-off-by: Robin Townsend --- res/css/views/rooms/_EventTile.scss | 3 --- src/HtmlUtils.tsx | 12 ++++++++++-- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 51e7f169272..ddf10840c89 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -471,9 +471,6 @@ $left-gutter: 64px; // selector wrongly applies to pill avatars but those have explicit width/height passed at a higher specificity &.markdown-body img { - // the image will have max-width and max-height applied during sanitization - width: 100%; - height: 100%; object-fit: contain; object-position: left top; } diff --git a/src/HtmlUtils.tsx b/src/HtmlUtils.tsx index ca391fc300d..2f0e4fc8c5b 100644 --- a/src/HtmlUtils.tsx +++ b/src/HtmlUtils.tsx @@ -209,11 +209,19 @@ const transformTags: IExtendedSanitizeOptions["transformTags"] = { // custom to return { tagName, attribs: {} }; } - const width = Math.min(Number(attribs.width) || 800, 800); - const height = Math.min(Number(attribs.height) || 600, 600); + const requestedWidth = Number(attribs.width); + const requestedHeight = Number(attribs.height); + const width = Math.min(requestedWidth || 800, 800); + const height = Math.min(requestedHeight || 600, 600); // specify width/height as max values instead of absolute ones to allow object-fit to do its thing // we only allow our own styles for this tag so overwrite the attribute attribs.style = `max-width: ${width}px; max-height: ${height}px;`; + if (requestedWidth) { + attribs.style += "width: 100%;"; + } + if (requestedHeight) { + attribs.style += "height: 100%;"; + } attribs.src = mediaFromMxc(src).getThumbnailOfSourceHttp(width, height); return { tagName, attribs };