Always use a 1:1 aspect ratio for avatars

Author: abeddow91

dotcom-rendering/src/components/Avatar.tsx

@@ -64,27 +64,65 @@ const decideImageWidths = (
 ): [ImageWidthType, ...ImageWidthType[]] => {
 	switch (imageSize) {
 		case 'small':
-			return [{ breakpoint: breakpoints.mobile, width: 80 }];
+			return [
+				{
+					breakpoint: breakpoints.mobile,
+					width: 80,
+					aspectRatio: '1:1',
+				},
+			];
 
 		case 'medium':
 		default:
 			return [
-				{ breakpoint: breakpoints.mobile, width: 80 },
-				{ breakpoint: breakpoints.desktop, width: 90 },
+				{
+					breakpoint: breakpoints.mobile,
+					width: 80,
+					aspectRatio: '1:1',
+				},
+				{
+					breakpoint: breakpoints.desktop,
+					width: 90,
+					aspectRatio: '1:1',
+				},
 			];
 
 		case 'large':
 			return [
-				{ breakpoint: breakpoints.mobile, width: 150 },
-				{ breakpoint: breakpoints.tablet, width: 130 },
-				{ breakpoint: breakpoints.desktop, width: 150 },
+				{
+					breakpoint: breakpoints.mobile,
+					width: 150,
+					aspectRatio: '1:1',
+				},
+				{
+					breakpoint: breakpoints.tablet,
+					width: 130,
+					aspectRatio: '1:1',
+				},
+				{
+					breakpoint: breakpoints.desktop,
+					width: 150,
+					aspectRatio: '1:1',
+				},
 			];
 
 		case 'jumbo':
 			return [
-				{ breakpoint: breakpoints.mobile, width: 180 },
-				{ breakpoint: breakpoints.tablet, width: 160 },
-				{ breakpoint: breakpoints.desktop, width: 190 },
+				{
+					breakpoint: breakpoints.mobile,
+					width: 180,
+					aspectRatio: '1:1',
+				},
+				{
+					breakpoint: breakpoints.tablet,
+					width: 160,
+					aspectRatio: '1:1',
+				},
+				{
+					breakpoint: breakpoints.desktop,
+					width: 190,
+					aspectRatio: '1:1',
+				},
 			];
 		/* Avatars on cards in the highlights container are fixed to 98px on all breakpoints */
 		case 'highlights-card':