aljaz/boris
1
1
Fork 0
mirror of https://github.com/dergigi/boris.git synced 2025-12-17 14:44:26 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: preserve image aspect ratio when full-width images setting is enabled

Browse Source 
- Add object-fit: contain to prevent image squishing
- Make max-height conditional: none when full-width enabled, 70vh otherwise
- Apply fix to both desktop and mobile image styles
This commit is contained in:
Gigi
2025-11-01 10:15:58 +01:00
parent db46edd39e
commit 5bdc435f5d
2 changed files with 6 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/hooks/useSettings.ts
View File

@@ -71,8 +71,9 @@ export function useSettings({ relayPool, eventStore, pubkey, accountManager }: U
// Set paragraph alignment // Set paragraph alignment
root.setProperty('--paragraph-alignment', settings.paragraphAlignment || 'justify') root.setProperty('--paragraph-alignment', settings.paragraphAlignment || 'justify')
// Set image width based on full-width setting // Set image width and max-height based on full-width setting
root.setProperty('--image-width', settings.fullWidthImages ? '100%' : 'auto') root.setProperty('--image-width', settings.fullWidthImages ? '100%' : 'auto')
root.setProperty('--image-max-height', settings.fullWidthImages ? 'none' : '70vh')
} }

5
src/styles/components/reader.css
View File

@@ -59,11 +59,12 @@
.reader .reader-html img, .reader .reader-markdown img { .reader .reader-html img, .reader .reader-markdown img {
width: var(--image-width, auto); width: var(--image-width, auto);
max-width: 100%; max-width: 100%;
max-height: 70vh; max-height: var(--image-max-height, 70vh);
height: auto; height: auto;
display: block; display: block;
margin: 0.75rem auto; margin: 0.75rem auto;
border-radius: 6px; border-radius: 6px;
object-fit: contain;
} }
/* Headlines with Tailwind typography */ /* Headlines with Tailwind typography */
.reader-markdown h1, .reader-html h1 { .reader-markdown h1, .reader-html h1 {
@@ -194,7 +195,9 @@
.reader-markdown img, .reader-html img { .reader-markdown img, .reader-html img {
width: var(--image-width, auto) !important; width: var(--image-width, auto) !important;
max-width: 100% !important; max-width: 100% !important;
max-height: var(--image-max-height, 70vh) !important;
height: auto; height: auto;
object-fit: contain;
} }
} }