From b6b019621a0159cb950293b9e50e0ca9de404652 Mon Sep 17 00:00:00 2001
From: John O'Nolan <john@tryghost.org>
Date: Tue, 17 Sep 2013 11:03:55 +0100
Subject: [PATCH] Make user profile images always fit their circle

Closes #778
---
 core/client/assets/sass/layouts/users.scss | 15 +++++++++++----
 core/client/tpl/settings/user-profile.hbs  |  2 +-
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/core/client/assets/sass/layouts/users.scss b/core/client/assets/sass/layouts/users.scss
index 5b6f4756bb..505509294c 100644
--- a/core/client/assets/sass/layouts/users.scss
+++ b/core/client/assets/sass/layouts/users.scss
@@ -190,20 +190,27 @@
 
     .user-image {
         @include box-sizing(border-box);
+        display: table;
         position: relative;
         width: 120px;
         height: 120px;
         float: left;
         margin-left: 40px;
         margin-right: 20px;
-        border-radius: 60px;
+        text-align: center;
+        border-radius: 100%;
+        overflow: hidden;
         border: 5px solid #fff;
+        background: $darkgrey;
         z-index: 2;
 
-        img {
+        .img {
             display: block;
-            line-height: 0;
-            border-radius: 100%;
+            width: 100%;
+            height: 100%;
+            background-image: url(/shared/img/default-user-profile-picture.jpg);
+            background-size: cover;
+            background-position: center center;
         }
 
         &:hover {
diff --git a/core/client/tpl/settings/user-profile.hbs b/core/client/tpl/settings/user-profile.hbs
index 9e15969dd2..0392d0a8ca 100644
--- a/core/client/tpl/settings/user-profile.hbs
+++ b/core/client/tpl/settings/user-profile.hbs
@@ -17,7 +17,7 @@
         <fieldset class="user-details-top">
 
             <figure class="user-image">
-                <img id="user-image" src="{{#if image}}{{image}}{{else}}/shared/img/default-user-profile-picture.jpg{{/if}}" title="{{name}}" />
+                <a id="user-image" class="img" {{#if image}}style="background-image: url({{image}});"{{/if}} href="#"><span class="hidden">{{name}}'s Picture</span></a>
                 <button class="edit-user-image js-modal-image">Edit Picture</button>
             </figure>