cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-26 09:00:57 -05:00
Code Issues Projects Releases Packages Wiki Activity

Improve image embed scaling.

Browse source 
- fixes #15
This commit is contained in:
brecert 2021-08-06 12:39:23 -04:00
parent 8d65e1ee11
commit 144a63a5c8
No known key found for this signature in database
GPG key ID: 1B2E56B9EC985B96
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`
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);
img,
video {
min-width: 100%;
min-height: 100%;
max-width: min(100%, var(--width), var(--attachment-max-width));
max-height: min(var(--height), var(--attachment-max-height));
width: auto;
height: auto;
img, video {
grid-area: 1 / 1;
display: block;
max-width: 100%;
max-height: 100%;
grid-area: 1 / 1;
object-fit: contain;
}
video {
width: 100%;
height: 100%;
}
&.spoiler {
@ -56,7 +58,7 @@ export function SizedGrid(props: Props) {
...style,
"--width": `${width}px`,
"--height": `${height}px`,
"--aspect-ratio": width / height,
"--aspect-ratio": `${width} / ${height}`,
}}>
{children}
</Grid>