Fix the shaking issue for avatars with an aspect ratio that is not 1:1.

kerwin612 · kerwin612 · commit cfde7feec621 · 2024-11-22T00:51:18.000Z
diff --git a/modules/templates/util_avatar.go b/modules/templates/util_avatar.go
@@ -34,7 +34,7 @@ func AvatarHTML(src string, size int, class, name string) template.HTML {
 		name = "avatar"
 	}
 
-	return template.HTML(`<img loading="lazy" class="` + class + `" src="` + src + `" title="` + html.EscapeString(name) + `" width="` + sizeStr + `" height="` + sizeStr + `"/>`)
+	return template.HTML(`<img loading="lazy" class="` + class + `" src="` + src + `" title="` + html.EscapeString(name) + `" height="` + sizeStr + `"/>`)
 }
 
 // Avatar renders user avatars. args: user, size (int), class (string)
diff --git a/web_src/css/base.css b/web_src/css/base.css
@@ -463,7 +463,6 @@ img.ui.avatar,
 .ui.avatar svg {
   border-radius: var(--border-radius);
   object-fit: contain;
-  aspect-ratio: 1;
 }
 
 .ui.error.message .header,
diff --git a/web_src/css/user.css b/web_src/css/user.css
@@ -43,7 +43,6 @@
 
 .user.profile .ui.card #profile-avatar img {
   max-width: 100%;
-  height: auto;
 }
 
 @media (max-width: 767.98px) {

Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,7 @@ func AvatarHTML(src string, size int, class, name string) template.HTML {`
`34`	`34`	`name = "avatar"`
`35`	`35`	`}`
`36`	`36`
`37`		- return template.HTML(`<img loading="lazy" class="` + class + `" src="` + src + `" title="` + html.EscapeString(name) + `" width="` + sizeStr + `" height="` + sizeStr + `"/>`)
	`37`	+ return template.HTML(`<img loading="lazy" class="` + class + `" src="` + src + `" title="` + html.EscapeString(name) + `" height="` + sizeStr + `"/>`)
`38`	`38`	`}`
`39`	`39`
`40`	`40`	`// Avatar renders user avatars. args: user, size (int), class (string)`
Original file line number	Diff line number	Diff line change
`@@ -463,7 +463,6 @@ img.ui.avatar,`
`463`	`463`	`.ui.avatar svg {`
`464`	`464`	`border-radius: var(--border-radius);`
`465`	`465`	`object-fit: contain;`
`466`		`- aspect-ratio: 1;`
`467`	`466`	`}`
`468`	`467`
`469`	`468`	`.ui.error.message .header,`
Original file line number	Diff line number	Diff line change
`@@ -43,7 +43,6 @@`
`43`	`43`
`44`	`44`	`.user.profile .ui.card #profile-avatar img {`
`45`	`45`	`max-width: 100%;`
`46`		`- height: auto;`
`47`	`46`	`}`
`48`	`47`
`49`	`48`	`@media (max-width: 767.98px) {`