Ensure all images are squares
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Amy 2021-11-19 23:42:07 -05:00
parent 61338101a0
commit 662ae2fe66
3 changed files with 11 additions and 12 deletions

View File

@ -1,14 +1,15 @@
.container { .container {
max-width: calc(126rem / 16); width: calc(126rem / 16);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 0; margin: 0;
} }
.img { .img {
width: 100%; width: calc(118rem / 16);
border-radius: 50%; height: calc(118rem / 16);
margin: 0 auto;
clip-path: circle();
object-fit: cover; object-fit: cover;
} }
@ -29,7 +30,8 @@
@media only screen and (max-width: calc(768rem / 16)) { @media only screen and (max-width: calc(768rem / 16)) {
.img { .img {
width: 100%; width: calc(126rem / 16);
height: calc(126rem / 16);
} }
.caption { .caption {

View File

@ -18,11 +18,12 @@
max-width: calc(126rem / 16); max-width: calc(126rem / 16);
max-height: calc(126rem / 16); max-height: calc(126rem / 16);
clip-path: circle(50%); clip-path: circle();
} }
.image { .image {
width: 100%; width: calc(126rem / 16);
height: calc(126rem / 16);
} }
.name { .name {
@ -112,10 +113,6 @@
align-items: center; align-items: center;
} }
.popupImage {
width: 100%;
}
.popupName { .popupName {
color: var(--primary-accent); color: var(--primary-accent);
margin: calc(24rem / 16) 0 0 0; margin: calc(24rem / 16) 0 0 0;

View File

@ -28,7 +28,7 @@ function TeamMemberInfo({
<> <>
<div className={styles.picture}> <div className={styles.picture}>
<Image <Image
className={isPopup ? styles.popupImage : styles.image} className={styles.image}
src={image} src={image}
alt={`Picture of ${name}`} alt={`Picture of ${name}`}
/> />