I have a Grid which needs to be a square that is responsive to window size, and inside this grid is a button which should take up the entirety of the grid. Currently, the grid resizes properly, but the contents inside of it do not take up the full size of the Grid. Here is my code
galleryButtonContainer: {
width: '100%',
height: 0,
paddingBottom: '100%',
borderRadius: '20%',
backgroundColor: theme.palette.grey.light,
'&:hover': {
backgroundColor: theme.palette.grey.light,
},
},
image: {
objectFit: 'cover',
width: '100%',
height: '100%',
borderRadius: '20%',
},
thumbnailIcon: {
width: '50%',
height: '50%',
},<Grid className={classes.galleryButtonContainer}>
<Button
onClick={() =>
toPage(
`/gallery/view/organizationEvent/${data.organizationEventId}`
)
}
>
{hasPhotos ? (
<img
src={thumbnail}
alt="gallery thumbnail"
className={classes.image}
/>
) : (
<PhotoLibraryIcon className={classes.thumbnailIcon} />
)}
</Button>
</Grid>