diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx index 7b978d8bae..daf7addf22 100644 --- a/src/view/com/post-thread/PostThreadItem.tsx +++ b/src/view/com/post-thread/PostThreadItem.tsx @@ -366,7 +366,7 @@ let PostThreadItemLoaded = ({ )} diff --git a/src/view/com/util/images/AutoSizedImage.tsx b/src/view/com/util/images/AutoSizedImage.tsx index dd66c2a9ae..c047228d3e 100644 --- a/src/view/com/util/images/AutoSizedImage.tsx +++ b/src/view/com/util/images/AutoSizedImage.tsx @@ -19,13 +19,20 @@ export function useImageAspectRatio({ src: string dimensions: Dimensions | undefined }) { - const [rawAspectRatio, setAspectRatio] = React.useState( + const [raw, setAspectRatio] = React.useState( dimensions ? calc(dimensions) : 1, ) - const aspectRatio = React.useMemo(() => { - // max of 3:4 ratio - return Math.max(rawAspectRatio, 0.75) - }, [rawAspectRatio]) + const {isCropped, constrained, max} = React.useMemo(() => { + const a34 = 0.75 // max of 3:4 ratio in feeds + const constrained = Math.max(raw, a34) + const max = Math.max(raw, 0.25) // max of 1:4 in thread + const isCropped = raw < constrained + return { + isCropped, + constrained, + max, + } + }, [raw]) React.useEffect(() => { let aborted = false @@ -41,9 +48,10 @@ export function useImageAspectRatio({ return { dimensions, - rawAspectRatio, - aspectRatio, - isCropped: rawAspectRatio < aspectRatio, + raw, + constrained, + max, + isCropped, } } @@ -100,7 +108,11 @@ export function AutoSizedImage({ const t = useTheme() const {_} = useLingui() const largeAlt = useLargeAltBadgeEnabled() - const {aspectRatio, isCropped: rawIsCropped} = useImageAspectRatio({ + const { + constrained, + max, + isCropped: rawIsCropped, + } = useImageAspectRatio({ src: image.thumb, dimensions: image.aspectRatio, }) @@ -171,14 +183,14 @@ export function AutoSizedImage({ a.rounded_sm, a.overflow_hidden, t.atoms.bg_contrast_25, - {aspectRatio}, + {aspectRatio: max}, ]}> {contents} ) } else { return ( - +