The solution provided below is based on the information found in this article: https://css-tricks.com/aspect-ratio-boxes/#article-header-id-3
Essentially, the approach involves using percentage-based padding-top to create a box with a specific aspect ratio, such as a square. When specifying padding-top or padding-bottom in percentages, it is crucial to remember that it is based on width, resulting in a height equivalent to the specified width.
The relevant CSS/JS snippet is as follows:
avatarSkeletonContainer: {
height: 0,
overflow: "hidden",
paddingTop: "100%",
position: "relative"
},
avatarLoader: {
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%"
},
This code segment is then utilized in the following manner:
<Grid container item xs={3} spacing={0} direction="column">
<div className={classes.avatarSkeletonContainer}>
<Skeleton variant="circle" className={classes.avatarLoader} />
</div>
<Skeleton className={clsx(classes.titleLoader, classes.title)} />
<Skeleton className={clsx(classes.contentLoader, classes.content)} />
</Grid>
Here's my modified version of your sandbox code:
// The complete code can be found here
// Link: https://codesandbox.io/s/skeleton-scaling-ndzs7?fontsize=14&hidenavigation=1&theme=dark
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Avatar from "@material-ui/core/Avatar";
import Skeleton from "@material-ui/lab/Skeleton";
import Typography from "@material-ui/core/Typography";
import clsx from "clsx";
import Grid from "@material-ui/core/Grid";
const useStyles = makeStyles(theme => ({
// Styles and classes definition go here
}));
export default function ImageAvatars() {
const classes = useStyles();
return (
<div className={classes.root}>
// Nested grid structure and components are implemented here
</div>
);
}
If you need further assistance or clarification, feel free to ask!