cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-12-25 23:22:06 -05:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
Improve image embed scaling.
This commit is contained in:
Paul Makles 2021-08-06 17:42:32 +01:00 committed by GitHub
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`
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>