HMC
/
handmade-revolt
forked from abner/for-legacy-web
2
0
Fork 0
Code Pull Requests Actions Activity

Merge pull request #18 from brecert/image-embed-scaling 

Improve image embed scaling.
ui/bot-profile
Paul Makles 2021-08-06 17:42:32 +01:00 committed by GitHub
parent 0d732ededb 144a63a5c8
commit ae7101a673
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/common/messaging/attachments/Grid.tsx
View File

@ -4,24 +4,26 @@ import { Children } from "../../../../types/Preact";
const Grid = styled.div` const Grid = styled.div`
display: grid; display: grid;
overflow: hidden;
max-width: min(var(--attachment-max-width), 100%, var(--width));
max-height: min(var(--attachment-max-height), var(--height));
aspect-ratio: var(--aspect-ratio); aspect-ratio: var(--aspect-ratio);
img, max-width: min(100%, var(--width), var(--attachment-max-width));
video { max-height: min(var(--height), var(--attachment-max-height));
min-width: 100%;
min-height: 100%;
width: auto; img, video {
height: auto; grid-area: 1 / 1;
display: block;
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
grid-area: 1 / 1; object-fit: contain;
}
video {
width: 100%;
height: 100%;
} }
&.spoiler { &.spoiler {
@ -56,7 +58,7 @@ export function SizedGrid(props: Props) {
...style, ...style,
"--width": `${width}px`, "--width": `${width}px`,
"--height": `${height}px`, "--height": `${height}px`,
"--aspect-ratio": width / height, "--aspect-ratio": `${width} / ${height}`,
}}> }}>
{children} {children}
</Grid> </Grid>