mirror of
https://github.com/antebudimir/feishin.git
synced 2025-12-31 10:03:33 +00:00
fix inconsistent image loader aspect ratio
This commit is contained in:
parent
51181a6695
commit
dd70d30cd3
3 changed files with 9 additions and 3 deletions
|
|
@ -99,7 +99,7 @@
|
|||
grid-area: image;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
filter: drop-shadow(0 0 8px rgb(0 0 0 / 50%));
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@
|
|||
.loader {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
|
|
@ -38,7 +39,7 @@
|
|||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
aspect-ratio: 1 / 1;
|
||||
background-color: darken(var(--theme-colors-foreground), 40%);
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -107,7 +107,12 @@ const ImageContainer = forwardRef(
|
|||
);
|
||||
|
||||
function ImageLoader({ className }: ImageLoaderProps) {
|
||||
return <Skeleton className={clsx(styles.skeleton, styles.loader, className)} />;
|
||||
return (
|
||||
<Skeleton
|
||||
className={clsx(styles.skeleton, styles.loader, className)}
|
||||
containerClassName={styles.skeletonContainer}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function ImageUnloader({ className }: ImageUnloaderProps) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue