diff --git a/src/hooks/useSettings.ts b/src/hooks/useSettings.ts index c4ef517f..4d96854f 100644 --- a/src/hooks/useSettings.ts +++ b/src/hooks/useSettings.ts @@ -71,8 +71,8 @@ export function useSettings({ relayPool, eventStore, pubkey, accountManager }: U // Set paragraph alignment root.setProperty('--paragraph-alignment', settings.paragraphAlignment || 'justify') - // Set image max-width based on full-width setting - root.setProperty('--image-max-width', settings.fullWidthImages ? 'none' : '100%') + // Set image width based on full-width setting + root.setProperty('--image-width', settings.fullWidthImages ? '100%' : 'auto') } diff --git a/src/styles/components/reader.css b/src/styles/components/reader.css index 0835771f..d5564d38 100644 --- a/src/styles/components/reader.css +++ b/src/styles/components/reader.css @@ -57,10 +57,10 @@ .reader .reader-markdown h1, .reader .reader-markdown h2, .reader .reader-markdown h3, .reader .reader-markdown h4, .reader .reader-markdown h5, .reader .reader-markdown h6 { text-align: left !important; } /* Tame images from external content */ .reader .reader-html img, .reader .reader-markdown img { - max-width: var(--image-max-width, 100%); + width: var(--image-width, auto); + max-width: 100%; max-height: 70vh; height: auto; - width: auto; display: block; margin: 0.75rem auto; border-radius: 6px; @@ -192,8 +192,8 @@ } .reader-markdown img, .reader-html img { + width: var(--image-width, auto) !important; max-width: 100% !important; - width: auto !important; height: auto; } }