Make user profile image show full image on mobile (#19840)

* Make user profile image show full image on mobile

Author: Eekle

templates/user/profile.tmpl

@@ -4,15 +4,17 @@
 		<div class="ui stackable grid">
 			<div class="ui five wide column">
 				<div class="ui card">
+					<div id="profile-avatar" class="content df"/>
 					{{if eq .SignedUserName .Owner.Name}}
-						<a class="image tooltip" href="{{AppSubUrl}}/user/settings" id="profile-avatar" data-content="{{.i18n.Tr "user.change_avatar"}}" data-position="bottom center">
+						<a class="image tooltip" href="{{AppSubUrl}}/user/settings" data-content="{{.i18n.Tr "user.change_avatar"}}" data-position="bottom center">
 							{{avatar .Owner 290}}
 						</a>
 					{{else}}
-						<span class="image" id="profile-avatar">
+						<span class="image">
 							{{avatar .Owner 290}}
 						</span>
 					{{end}}
+					</div>
 					<div class="content word-break profile-avatar-name">
 						{{if .Owner.FullName}}<span class="header text center">{{.Owner.FullName}}</span>{{end}}
 						<span class="username text center">{{.Owner.Name}}</span>

web_src/less/_user.less

@@ -44,27 +44,20 @@
           }
         }
       }
-
       #profile-avatar {
         background: none;
         padding: 1rem 1rem .25rem;
-
+        justify-content: center;
         img {
           width: 100%;
           height: auto;
           object-fit: contain;
           margin: 0;
-        }
-
-        @media @mediaSm {
-          height: 250px;
-          overflow: hidden;
-
-          img {
-            max-height: 767px;
-            max-width: 767px;
+          @media @mediaSm {
+            width: 30vw;
           }
         }
+
       }
 
       @media @mediaSm {